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

$.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中不能正常工作(当然!)这似乎不允许您隐藏options。我该怎么解决这个问题?
我现在得到的是:
(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);

在IE中确实有效,但仍然有两个问题。.filter(':first').attr('selected','selected');位似乎在IE中没有任何作用(它应该选择第一个可见元素)。自从我使用appendTo以来,它现在默认为最后一个。另一个问题是,由于我立即分离了所有元素,所以在HTML中不能有默认值。

最佳答案

无法将选项标记为隐藏。必须使用SelectElement.add(选项)和SelectElement.remove(索引)。。。
下面是一个链接,可按相同顺序删除和添加选择选项。
How can I restore the order of an (incomplete) select list to its original order?
这里有一个链接,我在这里发了一篇帖子,是为了做最简单的事情
How to hide optgroup/option elements?
在我的帖子里注意到了试一试。这在添加元素时是必要的,特别是在使站点在firefox和IE中可用时。

关于javascript - 在IE中隐藏<option>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2762525/

10-13 09:04