Ich möchte die zweite Dropdown-Liste basierend auf der Auswahl der ersten ändern, aber es funktioniert momentan nicht. Ich verwende die selectpicker und form-group Klasse von Bootstrap select, obwohl ich nicht sicher bin, ob es das Problem verursacht hat.Änderung der zweiten Dropdown-Liste basierend auf der ersten Dropdown-Liste
Das zweite Dropdown-Menü ist deaktiviert, bevor das erste ausgewählt wird, und zeigt nur Elemente an, die der Datengruppenauswahl entsprechen.
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 möchten Sie nur die Elemente mit der Datengruppe nicht relevant sind selebtable zu sein ? Bitte schließen Sie die # # Option-Container-Werte auch auf Ihre Frage –
Ich denke: