啓用一個選擇框從上一個選擇框中選擇一個選項

我在頁面上有三個選擇框，我想保持第二個和第三個選擇框被禁用，直到在第一個選項中做出選擇，同樣保持直到在第二個選擇框中做出選擇爲止，第三個禁用。我想填充第二個選擇框作爲第一個選擇框中選擇的基礎。例如，如果三星是第一個盒子的選擇，那麼我希望三星模型只出現在第二個選擇框中。啓用一個選擇框從上一個選擇框中選擇一個選項

這是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

啓用一個選擇框從上一個選擇框中選擇一個選項

回答

相關問題