根據第一個下拉菜單更改第二個下拉菜單

我想根據第一個下拉菜單的選擇更改第二個下拉菜單，但目前無法正常工作。我使用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"); 
};

來源

2016-12-05 Victor

所以，你要只與數據組中的項目是selebtable ？請在您的問題中包含'＃option-container'值 –

我認爲：應該是 –

我覺得這是你需要什麼，如果我理解正確的。

使用$("#clubs").children().removeAttr('disabled');，使所有的孩子，然後禁用這是不相關的這種$(selectSeason).attr('disabled','disabled');

請檢查此琴

FIDDLE

來源

2016-12-05 04:43:05

謝謝！ @Mhamhammed Shevil KP。沒有班級，但仍然不能與班級合作。猜猜可能會有一些衝突。 – Victor

我真的不明白你的意思是'沒有班級，但仍然不能與班級一起工作' –

我的意思是我必須刪除「class =」selectpicker form-group「」才能使其工作 – Victor

根據第一個下拉菜單更改第二個下拉菜單

回答

相關問題