【问题标题】:Hide options in a select list using jQuery Redux使用 jQuery Redux 在选择列表中隐藏选项
【发布时间】:2011-07-24 21:13:07
【问题描述】:
见Hide options in a select list using jQuery
接受的答案是完全错误的;它不是跨浏览器兼容的。
投票率最高的解决方案(删除选项但保留完整列表的副本)是我一直在做的,但它不再适合我了。我必须在各种情况下添加和删除选项,所以如果我用完整列表(我通过 ajax 获得)替换列表,然后我必须再次重新过滤它以获得我真正想要的选项......和所有这些选择都是基于其他选择,所以真的很讨厌。
我的问题是,是否有一个插件可以真正从 DOM 中删除选项,但要记住它们的位置,以便以后可以轻松地重新添加到同一位置?从而使选项的跨浏览器隐藏/显示?
【问题讨论】:
标签:
javascript
jquery
dom
select
option
【解决方案1】:
(function($) {
$.fn.hideOption = function(val) {
var lastPos = 0;
$(this).children('option').each(function() {
var pos = $(this).data('prevPos');
if(!pos) $(this).data('prevPos', lastPos++);
else lastPos = pos+1;
});
var options = $(this).children('option[value="'+val+'"]');
var hiddenOptions = $(this).data('hiddenOptions');
if(!hiddenOptions) hiddenOptions = options;
else hiddenOptions = hiddenOptions.add(options);
$(this).data('hiddenOptions', hiddenOptions);
options.detach();
};
$.fn.showOption = function(val) {
var hiddenOptions = $(this).data('hiddenOptions');
if(!hiddenOptions) return;
var toAdd = null;
if(typeof(val) !== 'undefined') {
toAdd = hiddenOptions.filter(function() {
return $(this).val() == val;
});
} else {
toAdd = hiddenOptions;
}
hiddenOptions = hiddenOptions.not(toAdd);
$(this).data('hiddenOptions', hiddenOptions);
var visibleOptions = $(this).children();
var select = this;
var value = $(this).val();
toAdd.each(function(i,hidOpt) {
var optAdded = false;
visibleOptions.each(function(j,visOpt) {
if($(hidOpt).data('prevPos') >= $(visOpt).data('prevPos')) {
$(hidOpt).insertAfter(visOpt);
optAdded = true;
return;
}
});
if(!optAdded) $(hidOpt).prependTo(select);
});
$(this).val(value);
};
})(jQuery);
http://jsfiddle.net/mnpenner/fN2hm/14/
请尝试打破它或提出改进方法。