2

I have two drop downs, one which influences the other. The first acts as a filter for the second. Hiding (display:none) options does not work for IE8. So I need to actually remove the options. But I want to be able to reset the options to the original list and filter them again for a different team. The problem is either I delete options and never get them back OR I never delete anything. My gut tells me it is related to references or assigning the new object back to the DOM.

1st dropdown (dd1) - the html for this is right in my code, I had difficulty displaying it.

<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>

2nd dropdown (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);
}
4

2 回答 2

1

此外，您还可以：

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

  2. 使用 $() 而不是 jQuery。如果你使用 noConflict，你可以这样做

    (function ($) { 你的代码在这里用 $ 代替 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);

也可以($this.val() != 0)通过在选择器中添加 :gt(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();
于 2012-11-08T22:14:03.940 回答
0

两个变化。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());
    }
于 2012-11-08T17:46:29.553 回答