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>

这是jsfiddle创建的

Answer 1

虽然不是最微妙的解决方案，但将tmpdf.boxplot(['original','new'], by = 'by column', ax = ax, sym = '')添加到添加按钮功能将起作用：Fiddle

if(s.children().length===1)s.change();

这只是检查添加后是否只存在一个选项，因此更改了索引。另一种解决方案是比较添加前后的值（或selectedIndex），如下面的删除示例中所做的那样

作为旁注，现在删除按钮删除所有选项，是否是预期的行为？仅删除一个选项的示例（如果选择更改，则触发更改：

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

此fiddle

中的示例

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

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

1 个答案: