Question

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);
}

Answer 1

Also, you can:

1. Use jquery events binding instead of “onchange” attribute.

2. Use $() instead of jQuery. If you use noConflict, you can do this

   (function ($) {
   your code here with $ instead jQuery
   })(jQuery);

3. Use $(function () {}) instead of $(document).ready(function () {})

4. Use chaining. I mean

   jQuery(‘#pAnalystFilter’).empty().append(jQuery(newAnalystElement).html());

5. Use data() method to get attr(‘data-smth’)

6. If you use $(this) more than one time, it’s better to store it in a variable

(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();
    }
});

turns into

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