Home/ Questions/Q 8909791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:31:24+00:00

I have three select boxes on a page and I want to keep the

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0