启用一个选择框从上一个选择框中选择一个选项

我在页面上有三个选择框，我想保持第二个和第三个选择框被禁用，直到在第一个选项中做出选择，同样保持直到在第二个选择框中做出选择为止，第三个禁用。我想填充第二个选择框作为第一个选择框中选择的基础。例如，如果三星是第一个盒子的选择，那么我希望三星模型只出现在第二个选择框中。启用一个选择框从上一个选择框中选择一个选项

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

来源

2012-11-28 Nick Div

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

<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-28 07:19:16 saraf

即使没有value属性，也可以检索选择。这不是问题。我想知道如何填充它。我可以捕捉到选择变化触发的价值。但我想知道如何填充选择框。用于填充捕获事件的脚本不是脚本。可能是我没有正确地说出这个问题。对不起。不过谢谢你的努力。我很感激。 –

我编辑了我的答案填充模型下拉选择..我希望这个满足您的req .. 看到它在行动这里http://jsfiddle.net/ByfFn/4/ – saraf

这实际上是一个很酷的脚本你有wriiten。我可以看到你已经写了一个for循环来填充第二个选择框。有没有一种方法可以在一次执行中填充select。假设我已经将整个选择框写入并存储在一个变量中，那么我可以用一个命令填充整个集合。还有如何清理选择框中的旧选项。我发现它在你的代码中发生，但仅仅为了学习的目的，它是如何发生的。感谢您的帮助.. –

禁用（第2和第3）列出了加入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-28 06:02:07 Narendra

但是，它将如何首先被禁用。 –

检查编辑的答案，希望这会有所帮助。如果您仍有疑问，请告诉我。 – Narendra

我一直在问如何禁用它，但它确定我用onLoad document.getElementById（“Model”）。disabled = true;现在我的另一个问题是根据第一个选择框中的选择填充第二个选择框。 –

您可以禁用copmbobox jQuery中是这样的：

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

清洁香港的条件，然后禁用组合框，按您的条件

来源

2012-11-28 06:10:48

启用一个选择框从上一个选择框中选择一个选项

回答

相关问题