0

我在一个页面上有三个选择框，我想禁用第二个和第三个选择框，直到在第一个选择框做出选择，同样保持第三个选择框禁用，直到在第二个选择框做出选择。我想根据在第一个选择框中做出的选择来填充第二个选择框。例如，如果三星是在第一个框中做出的选择，那么我希望三星型号只出现在第二个选择框中。

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

4

3 回答 3

2

我已将您的 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");      
        }
    });
})

希望它符合您的目的。

于 2012-11-28T07:19:16.913 回答
1

通过添加禁用必需（第二和第三）列表disabled="disabled"

$(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');
      }) ;
});
于 2012-11-28T06:02:07.333 回答
0

您可以像这样在 jquery 中禁用 copmbobox：

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

检查您的条件，然后根据您的条件禁用组合框

于 2012-11-28T06:10:48.840 回答