jquery - jquery onchange 丢失选中状态

Question

我在这里放了一个演示：http: //jsfiddle.net/JjBPd/

$(function () {
    var options = $("select#areafilter").children("option");
    var selectoption = $("select#regionfilter");
    $(selectoption).on("change", function () {
        var selected = $(this).children("option:selected").data("path");
        $(options).appendTo("select#areafilter");
        $(options).each(function () {
            var region = $(this).data("region");
            if (region != selected && region != 'default') {
                $(this).remove();
            }
        });
        if (selected == 'default') {
            $(options).appendTo("select#areafilter");
        }
    });
});

基本上，如果您选择一个区域，然后选择和区域，然后再次选择按区域过滤，它会加载突出显示选择列表的最后一个选项，我尝试使用 selected='selected' 和焦点，但没有任何乐趣。

Answer 1

如果希望每次更改区域时都重置区域选择框，可以使用 jQuery 的prop()方法：

$(selectoption).on("change", function () {
  // reset the selected area
  options.prop('selected',false);

  ...

在此处查看分叉和更新的小提琴。

编辑： 这是更新后的代码，也可以在 Firefox 中使用。事实证明 Firefox 在添加时会创建新元素，而 Webkit 只是引用现有元素。因此，您必须重置新附加的选项。小提琴应该更新。

$(function () {
    var options = $("select#areafilter").children("option");
    var selectoption = $("select#regionfilter");
    $(selectoption).on("change", function () {

        var selected = $(this).children("option:selected").data("path");
        $(options).appendTo("select#areafilter");
        $(options).each(function () {
            var region = $(this).data("region");
            if (region != selected && region != 'default'){
                $(this).remove();
            }
        });
        if (selected == 'default') {
            $(options).appendTo("select#areafilter");
        }

        // reset the selected area
        $("select#areafilter").children().prop('selected',false).first().prop('selected',true);
    });
});