gpt4 book ai didi

javascript - 根据第一个下拉列表更改第二个下拉列表

转载 作者:行者123 更新时间:2023-11-28 05:16:15 25 4
gpt4 key购买 nike

我想根据第一个下拉列表的选择更改第二个下拉列表,但它现在不起作用。我正在使用 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('禁用','禁用');

请检查这个 fiddle

FIDDLE

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com