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

Accepted Answer

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/

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

Solution

Problem