CODEWITHSUNDEEP
javascriptjqueryhtmlselect
PaxBin
PaxBin

Reputation: 111

HTML SELECT - Run script onchange from option to another

I have the following :

<select  id="p1" name="p1">
  <option value="ok">Ok</option>
  <option value="closed">Closed</option>
  <option value="ko">KO</option>
</select>

I'm wondering how can i run a script on the page only when the value is changed from 'Ko to Ok'.

Upvotes: 1

Views: 8316

Answers (5)

Ishan Jain
Ishan Jain

Reputation: 8161

Use Jquery .change()

Try this :

<select  id="p1" name="p1">
  <option value="ok">Ok</option>
  <option value="closed">Closed</option>
  <option value="ko">KO</option>
</select>

Jquery:

$('select#p1').change(function(){
  if(this.value == "ok"){
     //-- Your Code IF someone select "OK"
  }
  else if(this.value == "closed"){
    //-- Your Code IF someone select "Closed"
  }
  else if(this.value == "ko"){
    //-- Your Code IF someone select "KO"
  }
});

According to OP question (run a script on the page only when the value is changed from 'Ko to Ok'):

You can use Custom Data Attributes for storing the previously selected option value.

Try this:

$("select#p1").one('focus', function () {
      $(this).prop('data-previous', $('select#p1').val());
}).change(function(){        
    if($(this).prop('data-previous') == "ko" && $(this).val() == "ok"){
       alert('Change');
    }
    $(this).prop('data-previous', $(this).val());
});

Working Example

Above code - We set data attribute data-previous when the select drop-down focused once. and than we bind the .change() event with select, so when options changed occurred we can check the previous selected and currently selected value and perform our operation (in the above example i am doing alert()).

Upvotes: 0

Kushal
Kushal

Reputation: 1360

I think so this should work for you

var prev_val = null;
$('#p1').change(function(){
   if(prev_val == "Ko" && this.value == "Ok"){//do something}
   prev_val = this.value
});

Upvotes: 1

Adil
Adil

Reputation: 148110

You can bind change event to your select. You would need to bind the event when the p1 is added to dom for that you can use document.ready

Live Demo

$(document).ready(function(){
    $('#p1').change(function(){
         alert(this.value);
    });
});

Edit To compare it with last selection

Live Demo

prevVal = "";
$('#p1').change(function(){    
    if(prevVal === "ko" && this.value === "ok")
        alert("from ko to ok");
     prevVal = this.value;
});

Upvotes: 3

Jay Patel
Jay Patel

Reputation: 5793

you can also put onchange="your_function()" in select element

<select onchange="your_function()">
    <option></option>
</select>

Upvotes: 1

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you have to store previous value and on change check what is the previous value and what is current one like this:

$(document).ready(function(){

    var previousvalue = "";
    $('#p1').on('change',function(){

        if(previousvalue === "ko" && $(this).val() === "ok")
        {
            alert("KO to OK");
        }

        previousvalue = $(this).val();

    })

})

DEMO FIDDLE

Upvotes: 1

Related Questions