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'.

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'.

• javascript
• jquery
• html
• select

5 Answers 5

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 pare it with last selection

Live Demo

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

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

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

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

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
});

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()).