在选择重新填充时触发更改事件答案

【问题标题】：Trigger change event on select repopulation在选择重新填充时触发更改事件
【发布时间】：2015-08-26 08:43:50
【问题描述】：

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

用 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>

这是一个 jsfiddle 创建的

【问题讨论】：

标签： jquery

【解决方案1】：

虽然不是最微妙的解决方案，但将if(s.children().length===1)s.change(); 添加到添加按钮功能将起作用：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 中的示例

作为第二个旁注，添加和删除可以组合成一个函数（使用参数说明添加或删除），检查前后的值。

【讨论】：