【问题标题】: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/

    请尝试打破它或提出改进方法。

    【讨论】:

      猜你喜欢
      • 2010-11-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-13
      • 2016-12-09
      相关资源
      最近更新 更多