[英]Hide dropdown options based on selected radio button and also on page onload
我有一个带有单选按钮和下拉列表的表单。
如果用户选择“ girls”,我只想显示在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.