gpt4 book ai didi

javascript - 从上一个选择框中选择选项时启用选择框

转载 作者:行者123 更新时间:2023-11-28 20:45:12 25 4
gpt4 key购买 nike

我在页面上有三个选择框,我想保持第二个和第三个选择框处于禁用状态,直到在第一个选择框中做出选择为止,并且类似地保持第三个选择框处于禁用状态,直到在第二个选择框中做出选择为止选择框。我想根据第一个选择框中所做的选择来填充第二个选择框。例如如果在第一个框中选择三星,那么我希望三星型号仅出现在第二个选择框中。

这是 HTML 代码。

<html>
<head>


<style>
select {
-webkit-appearance:none;
background-color:#58B14C;
background-position:initial initial;
background-repeat:initial initial;
border:0;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
color:#EEEEEE;
font-size:14px;
font-weight:bold;
margin-left:3px;
padding:2px 10px;
width:347px;
background:url("img/arrow.gif") no-repeat scroll 316px 6px black;
background-size: 16px;

}
select option{
background-color: black;
}
#mainselection { overflow:hidden; width:352px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 10px 10px 10px black;
background:grey;
float: left;
}

.stepsClass{
float:left;
}
body{
background-color: whitesmoke;
}
</style>

</head>
<body>
<form style="position:absolute;left: 15%;top: 25%;">
<div class="stepsClass"><input type="image" src="img/step1.png"></br><div id="mainselection">
<select id="Brand">
<option>Select your cellphone Brand</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
<div class="stepsClass"><input type="image" src="img/step2.png"></br> <div id="mainselection">
<select id="Model">
<option>Select your cellphone Model</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
<div class="stepsClass"><input type="image" src="img/step3.png"></br>
<div id="mainselection">
<select id="Carrier">
<option>Select your Carrier</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
</div></div>
</form>
</body>
</html>

很抱歉没有上传图片,我认为它们与这个问题没有任何关系。我还添加了 jQuery 标签,因为有人发现用 jQuery 编写 javascript 更容易。任何帮助,将不胜感激。

最佳答案

我已经修改了您的 HTML 选择选项,使其具有 value 属性。我相信这将允许您根据第一个选择框中所做的选择来填充第二个选择框。

  <select id="Brand">
<option value = "">Select your cellphone Brand</option>
<option value = "BB">Blackberry</option>
<option value = "ios">I-phone</option>
<option value = "sam">Samsung</option>
<option value = "htc">HTC</option>
<option value = "nokia">Nokia</option>
<option value = "mot">Motorola</option>
</select>


<select id="Model" >
<option>Select Your Model No.</option>
</select>
Javascrpt



$(function(){
$("#Model").attr("disabled","true");
$("#Brand").change(function(){
if(this.value != ""){
$('#Model').removeAttr('disabled');
var brand = $("#Brand option:selected").text();
document.getElementById("Model").options.length = 1;
for(var i = 0; i < 10 ;i++){
var selectOption = document.createElement("OPTION");
selectOption.text = brand + " Model No." + i;
document.getElementById('Model').appendChild(selectOption);
}
$("#Model").selectmenu("refresh","true");
}
else{
$("#Model").attr("disabled","true");
$("#Model").val("");
$("#Model").selectmenu("refresh","true");
}
});
})

希望它能满足您的目的。

关于javascript - 从上一个选择框中选择选项时启用选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13598732/

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