3

我想为国家/地区创建一个选择标签，当我们选择国家/地区时，它会隐藏所有 optgroups 及其状态的选择标签的内容，除了 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>
4

3 回答 3

4

这对我来说似乎很好用：

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

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

于 2012-08-28T20:41:25.203 回答
1

我认为您不能以跨浏览器的方式做到这一点。我想说最好的选择是存储所有选项并使用过滤选项重新创建选择

于 2012-08-28T20:36:27.113 回答
0

从 HTML 5 开始，我们有了这个hidden属性。我最近不得不做类似的事情，虽然使用 React，所以我将把确切的管道留给你，但你可以将你的设置optgroup为hiddenla

<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>
于 2017-07-28T03:16:04.227 回答