javascript - 根据第一个下拉菜单更改第二个下拉菜单

我想根据第一个下拉菜单的选择更改第二个下拉菜单，但现在无法正常工作。我正在使用bootstrap select的selectpicker和form-group类，尽管我不确定这是否引起了问题。

在选择第一个下拉菜单之前，将禁用第二个下拉菜单，并且仅显示与数据组选择匹配的项目。

HTML：

<select id="seasons" class="selectpicker form-group" title="Choose season" onchange="filterSeason();">
    <option value='2013-14'>2013-14</option>
    <option value='2014-15'>2014-15</option>
    <option value='2015-16'>2015-16</option>
    <option value='2016-17'>2016-17</option>
</select>
<select id="clubs" class="selectpicker form-group" title="Choose club" disabled>
    <optgroup data-group='2013-14' label="England">
        <option data-group='2013-14' value='ENG1'>Team 1</option>
        <option data-group='2013-14' value='ENG2'>Team 2</option>
    </optgroup>
    <optgroup data-group='2014-15' label="Spain">
        <option data-group='2014-15' value='SPA1'>Team 3</option>
    </optgroup>
    <optgroup data-group='2015-15' label="Germany">
        <option data-group='2015-16' value='GER1'>Team 4</option>
        <option data-group='2015-16' value='GER2'>Team 5</option>
        <option data-group='2015-16' value='GER3'>Team 6</option>
    </optgroup>
</select>

jQuery的：

function filterSeason() {
      var seasons = $("#seasons").find('option:selected').text();
      $("#option-container").children().appendTo("#clubs");
      var selectSeason = $("#clubs").children("[data-group!='"+seasons+"']");
      selectSeason.appendTo("#option-container");
      $("#clubs").removeAttr("disabled");
};

最佳答案

如果我理解正确，我认为这就是您所需要的。

使用$("#clubs").children().removeAttr('disabled');启用所有子项，然后禁用与此$(selectSeason).attr('disabled','disabled');不相关的子项

请检查这个小提琴

FIDDLE

关于javascript - 根据第一个下拉菜单更改第二个下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40966936/