Hide select's optgroups and their contents except the one selected

Question

I want to create a select tag for countries that when we select the country it hides all optgroups and their contents of a select tag for states except the optgroup and its content which has the same label as the selected country option, example

<select name="country">
<option value="United States">United States</option>     <!-- if I select US -->
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</select>

<select name="country">
<optgroup label="United States">
<option value="California">California</option>           <!-- Only these states -->
<option value="New York">New York</option>               <!-- are displayed -->
</optgroup>
<optgroup label="Canada">                                <!-- hidden-->
<option value="Ontario">Ontario</option>                 <!-- hidden-->
<option value="Quebec">Quebec</option>                   <!-- hidden-->
</optgroup>
<optgroup label="Mexico">                                <!-- hidden-->
<option value="Baja California">Baja California</option> <!-- hidden-->
<option value="Mexico Estado">Mexico Estado</option>     <!-- hidden-->
</optgroup>
</select>

nothing because I don't know how to do, i've searched in the web but found nothing, @hsalama: yes — user1301411, Aug 28 '12 at 20:41

score 5 · Accepted Answer · answered Aug 28 '12 at 20:41

5

This seems to be working fine for me:

$("select[name='country']:eq(0)").on("change", function() {
    $("select[name='country']:eq(1)")
        .find("optgroup,option")
        .hide()
        .filter("[label='" + this.value + "'],[label='" + this.value + "'] > *")
        .show();
});

DEMO: http://jsfiddle.net/MVkXg/

answered Aug 28 '12 at 20:41

VisioN

143,310
32
282
281

@VisioN Don't forget to disable the options in those optgroups as well, since a keyboard user can use the arrows and select the hidden options. – Fernando Silva Jan 21 '14 at 10:55

score 1 · Answer 2 · answered Aug 28 '12 at 20:36

1

I don't think you can do that in a cross browser manner. I'd say the best option is to store all options and recreate the select with filtered options

answered Aug 28 '12 at 20:36

Claudio Redi

67,454
15
130
155

score 0 · Answer 3 · answered Jul 28 '17 at 03:16

As of HTML 5 we have the hidden attribute. I had to do a similar thing recently, though with React so I'll leave the exact plumbing up to you, but you can set your optgroup to hidden a la

<select name="country">
  <optgroup label="United States">
    <option value="California">California</option>           <!-- Only these states -->
    <option value="New York">New York</option>               <!-- are displayed -->
  </optgroup>
  <optgroup label="Canada" hidden>                                <!-- hidden-->
    <option value="Ontario">Ontario</option>                 <!-- hidden-->
    <option value="Quebec">Quebec</option>                   <!-- hidden-->
  </optgroup>
</select>

Hide select's optgroups and their contents except the one selected

3 Answers3

Linked