CODEWITHSUNDEEP
javascriptjqueryinternet-explorer
Juan Rangel
Juan Rangel

Reputation: 1793

Show/Hide options in IE

I apologize for this dumb question. I have seen multiple answers with people getting this to work but I cannot get it for some reason.I have to dropdowns, 1 state and the other locations. I need the locations to be filtered when the user selects a state. I have this working fine in chrome on Mac. with the following code. jsfiddle

I'll paste the code here as well.

HTML

<select id="states">
<option value="none">-- Select State --</option>
<option value="TX">Texas</option>
<option value="AL">Alabama</option>
</select>

<select id="locations">
<option value="none">-- Select Location --</option>
<option>123 Nowhere TX</option>
<option>123 Somewhere TX</option>
<option>123 Elsewhere AL</option>
<option>123 Where? AL</option>
</select>

JS

$(document).ready(function(){

$('#states').change( function() {
    var $root = $(this);
    var selectedState = $root.val();
    $('#locations').val('none');

    $('#locations option').each(function(){
        var location = $(this).text();
        var abbr = location.substr(location.length - 2);
        if ( abbr != selectedState ) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });

});

});

If anyone can help me getting this to work in IE I would greatly appreciate it.

Upvotes: 1

Views: 66

Answers (1)

Victor Levin
Victor Levin

Reputation: 1177

Internet Explorer does not support hiding options from select element.

You can only disable or enable them like so:

$(this).attr('disabled', 'disabled').hide();

$(this).removeAttr('disabled').show();

You can remove the options using remove() , and then re-add them. But it is more involved depending on how you create options in the first place. If it's a static list, it might be fairly straightforward.

Upvotes: 1

Related Questions