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

  ...

查看forked and updated fiddle here。

修改 的 这里是更新的代码也可以在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);
    });
});