最初のドロップダウンに基づいて2番目のドロップダウンを変更します

Question

最初のドロップダウンを選択して2番目のドロップダウンを変更したいのですが、現在は機能していません。私はブートストラップセレクトのselectpickerとフォームグループクラスを使用していますが、問題が発生したかどうかはわかりません。

最初のドロップダウンが選択される前に2番目のドロップダウンが無効になり、データグループの選択と一致する項目のみが表示されます。

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

Answer 1

私は、これは私が正しく理解している場合、あなたが必要なものだと思います。この$(selectSeason).attr('disabled','disabled');

とは関係ありませんこれは、すべての子供たちを有効にして無効にする

使用$("#clubs").children().removeAttr('disabled');

FIDDLE