jquery - 如何删除选项并保留原始选项的副本？

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. 使用 jquery 事件绑定(bind)而不是“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)，最好将其存储在变量中

(function ($) {    $(function () {        var analystFullArrayElement; // by the way, your global scope is clean and it is good        $(function() {            analystFullArrayElement = $('#pAnalystFilter').clone();        });        $("#pTeamFilter").change(function () {            //get the team id            var teamId = $('#pTeamFilter').val();            //get full list of Analysts.            var newAnalystElement = $(analystFullArrayElement).clone();            $('option', newAnalystElement).each(function(){                //remove unwanted analysts                var $this = $(this);                if(($this.data("teamid") != teamId) && ($this.val() != 0)){                    $this.remove();                }            });                            $('#pAnalystFilter').empty().append($(newAnalystElement).html());        });    });})(jQuery);

Also yoг can avoid comparison ($this.val() != 0) by adding :gt(0) in selector and than apply filter, so

$('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();