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