gpt4 book ai didi

javascript - 根据选定的单选按钮和页面加载隐藏下拉选项

转载 作者:行者123 更新时间:2023-11-30 14:10:34 24 4
gpt4 key购买 nike

我有一个带有单选按钮和下拉列表的表单。

如果用户选择“女孩”,我只想显示 caroms 和国际象棋,如 girlsGames 变量中指定的那样。

如果用户选择男孩,我想显示 boysGames 变量的下拉选项。

这是我的代码:

<form action="">
<label for="boys"><input type="radio" id="boys" name="gender" value="boys">Boys</label>
<label for="girls"><input type="radio" id="girls" name="gender" value="girls">Girls</label>
<select name="games" id="">
<option value="">select games</option>
<option value="caroms">Caroms</option>
<option value="chess">Chess</option>
<option value="football">Football</option>
<option value="rugby">Rugby</option>
</select>
</form>
<script>
var girlsGames = ['caroms', 'chess'];
$('input:radio').change(function(event) {

});
</script>

最佳答案

这是许多方法之一,基于向特定选项添加类并隐藏/显示所有选项:

var girlsGames = ['caroms', 'chess'];
$('input:radio').change(function(event) {

if(event.target.value == 'girls') {
$('option').hide();
$('.girls').show();
} else if (event.target.value == 'boys'){
$('option').show();
}

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<label for="boys"><input type="radio" id="boys" name="gender" value="boys">Boys</label>
<label for="girls"><input type="radio" id="girls" name="gender" value="girls">Girls</label>
<select name="games" id="">
<option value="" class="girls">select games</option>
<option value="caroms" class="girls">Caroms</option>
<option value="chess" class="girls">Chess</option>
<option value="football">Football</option>
<option value="rugby">Rugby</option>
</select>
</form>

关于javascript - 根据选定的单选按钮和页面加载隐藏下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54537888/

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