选择重新填充时的触发器更改事件

Question

我有一个输入，它在更改时填充select中的选项条目。当选择了第一个选项，然后选择重新填充并且第一个选项再次被选择（自动）时，我想要触发更改事件（因为选择了具有不同值的选项）。

用jQuery解决这个问题的方法是什么？

<select id="s"> 
    <option value="1">1</option> 
</select> 
<input type="button" id="r" value="remove"> 
<input type="button" id="a" value="add"> 

<script> 
$(document).ready(function() { 
    var s = $("#s"); 
    var i = 100; 

    s.change(function() { 
     alert("changed"); 
    }); 

    $("#r").click(function() { 
     s.find("option").remove(); 
    }); 

    $("#a").click(function() { 
     s.append($("<option>", { 
      value: ++i 
     }).text(i)); 
     }); 


    // Select has changed from 1 to 101, 
    // so I want an event to be triggered 
    $("#r").click(); 
    $("#a").click(); 

    // but I do not want it to be triggered 
    // when same value is selected 
    $("#r").click(); 
    s.append($("<option>", { value: i }).text(i)); 
    }); 
</script> 

下面是创建

Answer 1

虽然不是最微妙的溶液，加if(s.children().length===1)s.change();添加按钮功能将工作jsfiddle：Fiddle

$("#a").click(function() {   
    s.append($("<option>", { 
     value: ++i 
    }).text(i)); 
    if(s.children().length===1)s.change(); 
}); 

这只是检查是否增加，只有一个选项后存在并因此索引改变。另一种解决方案是比较之前和增加后的值（或的selectedIndex），如删除例子做以下

---

一点题外话，现在的删除按钮删除所有的选项，是预期的行为？删除只有一个选项（和触发变化的一个例子，如果选择改变：

$("#r").click(function() { 
    var sel = s.val();   
    s.children("option:last").remove(); //remove last option (use option:first to remove the first) 
    var newval = s.val(); 
    if(sel !== newval && newval)s.change(); //fire change if the removed item was the selected one, but not if not items are left. 
}); 

例如在此fiddle

作为第二旁注，添加和删除可被组合成一个单一的功能（带有参数说明添加或删除），它检查前后的值。