我写了这个漂亮的函数,当选择框的值改变时过滤它们。。。
$.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/