Question

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

$.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中使用默认值。

Answer 1

无法将选项标记为隐藏。您必须使用SelectElement.add（选项）和SelectElement.remove（index）...

以下是以相同顺序删除和添加选择选项的链接。 How can I restore the order of an (incomplete) select list to its original order?

这是一个链接，我发了一个帖子，只是做了最简单的事情 How to hide optgroup/option elements?

请注意我的帖子中的try catch。这在添加元素时尤为必要，尤其是在使站点在firefox和IE中可用时。

在IE </option>中隐藏<option>

1 个答案: