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

此外，您可以：

使用jquery事件绑定而不是“onchange”属性。
使用$（）代替jQuery。如果你使用noConflict，你可以这样做

（function（$）{ 你的代码在这里使用$而不是jQuery }）（jQuery的）;
使用$(function () {})代替$(document).ready(function () {})
使用链接。我的意思是

的jQuery（ '＃pAnalystFilter'）空（）追加（jQuery的（newAnalystElement）的.html（））;
使用data（）方法获取attr（'data-smth'）
如果您多次使用$（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);

同样，你可以通过在选择器中添加：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();

Answer 2

两个变化。 1.我将document.getElements更改为jQuery调用。

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

我使用.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());
    }

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

2 个答案: