Home/ Questions/Q 6333073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T18:23:29+00:00

I have two select boxes (one for Car Types and the other for Car

  • 0

I have two select boxes (one for Car Types and the other for Car Models) in a web page that I would like to change one of them according to the other using JavaScript.

The code sample is as in the following:

<html>

<head>
<script type="text/javascript">

function showCarModels(CarTypeVaraiable)
{

//I want to hide all the options in the CarModelsList and select the options with name property value equals to CarTypeVaraiable Value .. How I can write this in JavaScript ?????

}
</script>

</head>

</script>

<body>

<p>Selecting Car Models depending on the Car Type Value ..... </p>

Car Type<select id="selCarType" name="selCarType" class="selCarType" size="1" onchange="showCarModels('selCarType');">                      
<option class="City" value="0" selected="selected">choose Car Type</option>
<option class="CarType" value="100" >Toyota</option>
<option class="CarType" value="200" >Chevrlolet</option>
<option class="CarType" value="300" >Kia</option>
</select>

Car Model
<select id="selCarModel" name="selCarModel" class="selCarModel" size="1">

<option class="City" value="0">choose Car Model</option>

<option class="CarType" value="110" name="100" title="13" >Toyota optra</option>
<option class="CarType" value="120" name="100" title="13" >Toyota Aveo</option>         
<option class="CarType" value="130" name="100" title="13" >Toyota Corolla</option>

<option class="CarType" value="210" name="200" title="13" >Chevrlolet Optra</option>
<option class="CarType" value="220" name="200" title="13" >Chevrlolet Aveo</option>

<option class="CarType" value="301" name="300" title="13" >Kia Rio</option>
<option class="CarType" value="450" name="300" title="13" >Kia Optima</option>
<option class="CarType" value="600" name="300" title="13" >Kia Serato</option>

</select>

</body>

</html>

What I should write in the code to carry out this dependency between the two dropdown lists?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it in HTML + javascript + CSS, however once your structure grows it will be very hard to maintain. It is also easy to make typo and it is hard to test.
    Better solution would be to use AJAX – store values for all categories in the database and create new select with options returned by server. You will have generic solution and adding new category + values is just adding records to the database, no need of changing html + js + css.

    UPDATE:

    I am not sure what backend language do you use, if it is php then you can take a look here: w3schools ajax example. If you use something else, then idea remains the same. Here you have beginning of ajax tutorial by w3schools. The example displays personal information after choosing a name from select, but you can just wrap the output in select tag and generate option for each out.

    • 0