gpt4 book ai didi

javascript - 更改复选框上的下拉菜单

转载 作者:太空宇宙 更新时间:2023-11-04 09:34:10 24 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<label class="">
<input type="radio" id="check1" name="ohradio" checked>bike
</label>
<label class="">
<input type="radio" id="check2" name="ohradio">car
</label>
<label class="">
<input type="radio" id="check3" name="ohradio">cycle
</label>
<br /><br />
<select id="firstDropdown" class="">
<optgroup >
<option>bike 1</option>
<option>bike 2</option>
<option>bike 3</option>
</optgroup>
</select>
<br /><br />
<select id="secondDropdown" class="myHide">
<optgroup >
<option>car 1</option>
<option>car 2</option>
<option>car 3</option>
</optgroup>
</select>
<br /><br />
<select id="thirdDropdown" class="myHide">
<optgroup >
<option>cycle 1</option>
<option>cycle 2</option>
<option>cycle 3</option>
</optgroup>
</select>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

style.css 中的代码如下

.myHide{
display: none;
}
.myVisible{
display: block;
}

custom.js 中的代码如下

$(document).ready(function (){
if(check2.checked){
$('#firstDropdown').addClass('myHide');
$('#secondDropdown').addClass('myVisible');
$('#thirdDropdown').addClass('myHide');
}
if(check3.checked){
$('#firstDropdown').addClass('myHide');
$('#secondDropdown').addClass('myHide');
$('#thirdDropdown').addClass('myVisible');
}
});

我想更改当用户选择不同的单选按钮时显示的下拉列表,例如,当他们单击自行车单选按钮时,应显示自行车下拉列表并隐藏其他下拉列表。但是上面的代码不起作用。我是 jquery 的初学者。

最佳答案

将 radio 更改事件放入您的代码中。只需将您的 javascript 脚本更改为

$(document).ready(function (){
$("input[type=radio]").change(function(){
$("select").removeClass('myVisible myHide');
if(check1.checked){
$('#firstDropdown').addClass('myVisible');
$('#secondDropdown').addClass('myHide');
$('#thirdDropdown').addClass('myHide');
}
if(check2.checked){
$('#firstDropdown').addClass('myHide');
$('#secondDropdown').addClass('myVisible');
$('#thirdDropdown').addClass('myHide');
}
if(check3.checked){
$('#firstDropdown').addClass('myHide');
$('#secondDropdown').addClass('myHide');
$('#thirdDropdown').addClass('myVisible');
}
});

});

查看演示 https://jsbin.com/lihusikoye/edit?html,css,js,output

关于javascript - 更改复选框上的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40502136/

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