Javascript 隐藏<；选项>；他在IE里

我写了这个漂亮的函数来过滤选择框，当它们的值改变时

$.fn.cascade = function() {
    var opts = this.children('option');
    var rel = this.attr('rel');
    $('[name='+rel+']').change(function() {
        var val = $(this).val();
        var disp = opts.filter('[rel='+val+']');
        opts.filter(':visible').hide();
        disp.show();
        if(!disp.filter(':selected').length) {
            disp.filter(':first').attr('selected','selected');
        }
    }).trigger('change');
    return this;
}

它查看

rel

属性，如果

rel

指示的元素发生更改，则它会过滤列表以仅显示具有该值的选项。。。例如，它在HTML上工作，如下所示：

<select id="id-pickup_address-country" name="pickup_address-country">
  <option selected="selected" value="CA">Canada
  </option>
  <option value="US">United States
  </option>
</select>

<select id="id-pickup_address-province" rel="pickup_address-country" name="pickup_address-province">
  <option rel="CA" value="AB">Alberta
  </option>
  <option selected="selected" rel="CA" value="BC">British Columbia
  </option>
  <option rel="CA" value="MB">Manitoba
  </option>...
</select>

---

这在IE中确实有效，但仍然存在两个问题。

.filter（':first'）.attr（'selected'，'selected'）位在IE中似乎没有任何作用（它应该选择第一个可见元素）。由于我一直在使用
appendTo
，它目前默认为最后一个。另一个问题是，由于我立即分离了所有元素，所以HTML中不能有默认值。
选项不能标记为隐藏。您必须使用SelectElement.add（选项）和SelectElement.remove（索引）

这里有一个链接，可以按相同顺序删除和添加选择选项。

这里有一个链接，我在这里发表了一篇文章，只做了最简单的事情

在我的帖子中记下了try-catch。在添加元素时，尤其是在firefox和IE中使用站点时，这是必要的。
以上链接应该可以帮助您修复。我不确定我是否喜欢这些代码。。。DVK的代码看起来像是一堆低效/非jQuery的乱七八糟的东西。此外，删除元素而不是分离元素将剥离任何事件。其中一些代码可能会被清除，但对于您的注释“分离元素将剥离任何事件”。您会将哪些事件附加到选项元素。您的事件应该在select元素上实时发生
(function($) {
    $.fn.cascade = function() {
        var filteredSelect = $(this);
        var filteredOpts = this.children('option');
        var triggerSelect = $('[name='+this.attr('rel')+']');

        triggerSelect.change(function() {
            var triggerValue = $(this).val();

            filteredOpts.detach()
                .filter('[rel='+triggerValue+']').appendTo(filteredSelect)
                .filter(':first').attr('selected','selected');
        }).trigger('change');
        return this;
    }
})(jQuery);