隐藏选择的选项组及其内容（所选选项除外）

Question

我想为国家/地区创建一个选择标签，当我们选择国家/地区时，它会隐藏所有 optgroup 及其国家/地区选择标签的内容，但 optgroup 及其内容与所选国家/地区选项具有相同标签，例如

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

Answer 1

这似乎对我来说效果很好：

\n\n

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

\n\n

演示： http: //jsfiddle.net/MVkXg/

\n