Change second dropdown based on first dropdown

Question

I want to change the second dropdown based on the selection of the first one, but it is not working right now. I'm using bootstrap select's selectpicker and form-group class, although I'm not sure if it caused the problem.

The second dropdown is disabled before the first one is selected, and only show items that match the data group selection.

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

So you want only the items with the data-group to be selebtable? pls include the `#option-container` values also to your question — Muhammed Shevil KP, Dec 05 '16 at 04:36

Muhammed Shevil KP · Answer 1 · 2016-12-05T06:50:34.330

0

I think this is what you needed if I understood correctly.

use $("#clubs").children().removeAttr('disabled'); to enable all children and then disable which are not relevant with this $(selectSeason).attr('disabled','disabled');

Please check this fiddle

FIDDLE

edited Dec 05 '16 at 06:50

answered Dec 05 '16 at 04:43

Muhammed Shevil KP

1,404
1
16
21

Thanks! @Muhammed Shevil KP. Works without the class, but still doesn't work with the class. Guess there might be some conflicts. – Victor Dec 05 '16 at 04:56
I don't really understand what you mean by `Works without the class, but still doesn't work with the class` – Muhammed Shevil KP Dec 05 '16 at 05:05
I mean I have to delete "class="selectpicker form-group"" to make it work – Victor Dec 05 '16 at 06:39
but it works without make any change to that class. please check the fiddle updated – Muhammed Shevil KP Dec 05 '16 at 06:51
1

This question helps solved my problem: http://stackoverflow.com/questions/27317296/how-to-enable-disable-bootstrap-selectpicker-by-ickeck-checkbox – Victor Dec 05 '16 at 07:56
I solved the problem with the question above. Thanks for you help! – Victor Dec 05 '16 at 07:57

Change second dropdown based on first dropdown

1 Answers1