Question

我在页面上有三个选择框，我想保留第二个和第三个选择框，直到在第一个选择框中做出选择，同样保持第三个选择框被禁用，直到第二个选择框被选中选择框。我想在第一个选择框中选择第二个选择框。例如如果三星是第一个盒子的选择，那么我希望三星机型只出现在第二个选择框中。

这是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更容易。任何帮助，将不胜感激。

Answer 1

我已经修改了您的HTML选择选项以具有值属性。我相信这将允许您在第一个选择框中选择的基础上填充第二个选择框。

  <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");      
        }
    });
})

希望它符合您的目的。

Answer 2

通过添加disabled="disabled"

禁用必填（第2和第3）列表

$(function(){
      // The following will enable the 2nd drop down list when 1st one will be changed/selected.
      $('#Brand').change(function(){
         $('#Model').removeAttr('disabled');
      });   

      // This block will enable the 3rd list when you change the 2nd list.
      $('#Model').change(function(){
         $('#Carrier').removeAttr('disabled');
      }) ;
});

Answer 3

你可以像这样在jquery中禁用组合框：

$("#cbCountry").combobox("option", "disabled", true);

检查您的状况，然后根据您的情况禁用组合框

选择上一个选择框中的选项时启用选择框

3 个答案: