CODEWITHSUNDEEP
javascriptjqueryhtml
Nick Div
Nick Div

Reputation: 5628

Enable a select box on choosing an option from previous select box

I have three select boxes on a page and I want to keep the second and third select box disabled until a choice has been made in the first one, and similarly keep the third one disabled until a choice has been made in the second select box. And I want to populate the second select box one the basis of the choice made in the first select box. for e.g. if samsung is the choice made in first box then I want the samsung models only to appear in second select box.

This is m HTML code.

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

I am sorry for not uploading the images I am assuming they are not of any relevance to this question. I am also adding jQuery tag because there are people who find it easier to write javascript in jQuery. Any help would be appreciated.

Upvotes: 0

Views: 733

Answers (3)

saraf
saraf

Reputation: 646

I have modified your HTML select options to have a value attribute.I believe this would allow you to populate the second select box one the basis of the choice made in the first select box. 

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

Hope it serves your purpose.

Upvotes: 2

Rohit Vyas
Rohit Vyas

Reputation: 1969

you can disabled the copmbobox in jquery like this:

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

chk your condition and then disable the combobox as per your condition

Upvotes: 0

Narendra
Narendra

Reputation: 3117

Disable required(2nd and 3rd) lists by adding 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');
      }) ;
});

Upvotes: 1

Related Questions