Question

我有以下内容：

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

我想知道只有当值从'Ko变为Ok'时，我才能在页面上运行脚本。

Answer 1

您可以将更改事件绑定到您的选择。将p1添加到dom时，您需要绑定事件，以便使用document.ready

<强> Live Demo

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

修改将其与上次选择进行比较

<强> Live Demo

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

Answer 2

你必须存储以前的值并在更改时检查前一个值是什么，以及当前的值是什么：

$(document).ready(function(){

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

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

        previousvalue = $(this).val();

    })

})

DEMO FIDDLE

Answer 3

我认为这应该对你有用

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

Answer 4

你也可以在选择元素

中加上onchange =“your_function（）”

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

Answer 5

使用Jquery .change()

试试这个：

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

根据OP问题（run a script on the page only when the value is changed from 'Ko to Ok'）：

您可以使用Custom Data Attributes存储以前选择的选项值。

试试这个：

$("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

上面的代码 - 我们在选择下拉菜单聚焦一次时设置数据属性data-previous。并且我们将.change()事件与select绑定，因此当选项发生更改时，我们可以检查先前选择的和当前选择的值并执行我们的操作（在上面的示例中我正在执行alert()）。

HTML SELECT - 从选项到另一个选项运行脚本onchange

5 个答案: