如何删除选项并保留原件的副本？

Question

我有两个下拉菜单，一个会影响另一个。第一个充当第二个的过滤器。隐藏 (display:none) 选项不适用于 IE8。所以我需要实际删除选项。但我希望能够将选项重置为原始列表并再次为不同的团队过滤它们。问题是要么我删除选项并且永远不会让它们回来，要么我永远不会删除任何东西。我的直觉告诉我它与引用或将新对象分配回 DOM 有关。

第一个下拉菜单 (dd1) - html 就在我的代码中，我很难显示它。

<select id="pTeamFilter" onchange="teamChanged();" name="pTeamFilter">
    <option value="0">select a Team</option> 
    <option value="4"> Property Team </option> 
    <option value="7"> Rick's Team </option> 
    <option value="10"> Robert's Team </option>
</select>

第二个下拉菜单 (dd2)

<select id="pAnalystFilter" name="pAnalystFilter">
    <option value="0">select an Analyst</option>
    <option data-teamid="7" value="682"> Clark Kent </option>
    <option data-teamid="10" value="652"> Bruce Wayne </option>
    <option data-teamid="10" value="7"> Peter Parker </option>
    <option data-teamid="13" value="971"> Bruce Banner </option>
</select>

JS/jQ：

var analystFullArrayElement;
jQuery(document).ready(function() {
    analystFullArrayElement = jQuery(document.getElementById('pAnalystFilter')).clone();
});

function teamChanged() {
    //get the team id
    var teamId = document.getElementById('pTeamFilter').value;
    //get full list of Analysts.
    var newAnalystElement = jQuery(analystFullArrayElement).clone();
    jQuery('option', newAnalystElement).each(function() {
        //remove unwanted analysts
        if ((jQuery(this).attr("data-teamid") != teamId) && (jQuery(this).val() != 0)) {
            jQuery(this).remove();
        }
    });
    document.getElementById('pAnalystFilter').innerHTML() = jQuery(newAnalystElement).html();
    //var analystElement = document.getElementById('pAnalystFilter');
    //jQuery(analystElement).val(0);
}

Answer 1

两个变化。 1.我把document.getElements改成了jQuery调用。

            analystFullArrayElement = jQuery('#pAnalystFilter').clone();

1. 我使用 .empty() 后跟 .append() 来摆脱旧列表并应用新列表。

       function teamChanged(){
           //get the team id
           var teamId = jQuery('#pTeamFilter').val();
           //get full list of Analysts.
           var newAnalystElement = jQuery(analystFullArrayElement).clone();
           alert(jQuery(newAnalystElement).html());
           jQuery('option', newAnalystElement).each(function(){
               //remove unwanted analysts
               if((jQuery(this).attr("data-teamid") != teamId) && (jQuery(this).val() != 0)){
                   jQuery(this).remove();
               }
           });
           alert(jQuery(newAnalystElement).html());                
           jQuery('#pAnalystFilter').empty();
           jQuery('#pAnalystFilter').append(jQuery(newAnalystElement).html());
       }
   

Answer 2

此外，您还可以：

1. 使用 jquery 事件绑定而不是“onchange”属性。

2. 使用 $() 代替 jQuery。如果你使用noConflict，你可以这样做

   (函数 ($) { 你的代码在这里用 $ 而不是 jQuery })(jQuery);

3. 使用$(function () {}) 而不是$(document).ready(function () {})

4. 使用链接。我的意思是

   jQuery('#pAnalystFilter').empty().append(jQuery(newAnalystElement).html());

5. 使用data()方法获取attr('data-smth')

6. 如果多次使用$(this)，最好将其存储在一个变量中

（函数（$）{
    $（函数（）{

        var 分析师FullArrayElement; // 顺便说一下，你的全局范围很干净而且很好

        $（函数（）{
            分析师FullArrayElement = $('#pAnalystFilter').clone();
        });

        $("#pTeamFilter").change(function () {
            //获取团队ID
            var teamId = $('#pTeamFilter').val();
            //获取分析师的完整列表。
            var newAnalystElement = $(analystFullArrayElement).clone();
            $('option', newAnalystElement).each(function(){
                //删除不需要的分析师
                var $this = $(this);
                if(($this.data("teamid") != teamId) && ($this.val() != 0)){
                    $this.remove();
                }
            });
            $('#pAnalystFilter').empty().append($(newAnalystElement).html());
        });

    });
})(jQuery);

还可以通过在选择器中添加 :gt(0) 而不是应用过滤器来避免比较 ($this.val() != 0)，所以

$('option', newAnalystElement).each(function(){
    var $this = $(this);
    if(($this.data("teamid") != teamId) && ($this.val() != 0)){
        $this.remove();
    }
});

变成

$('option:gt(0)', newAnalystElement).filter(function () {
    return $(this).data("teamid") != teamId;
}).remove();