根据另一个选择列表值选择选择列表值
我在网页中有两个选择框（一个用于汽车类型，另一个用于汽车型号），我想使用 JavaScript 根据另一个选择框更改其中一个。
代码示例如下：
<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>
我应该在代码中编写什么来实现两个下拉列表之间的依赖关系？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你可以用 HTML + javascript + CSS 来完成，但是一旦你的结构增长，它将很难维护。也很容易犯错，而且很难测试。
更好的解决方案是使用 AJAX - 将所有类别的值存储在数据库中，并使用服务器返回的选项创建新的选择。您将拥有通用解决方案，添加新类别+值只需将记录添加到数据库中，无需更改 html + js + css。
更新：
我不确定你使用什么后端语言，如果是 php 那么你可以在这里看看： w3schools ajax 示例。如果您使用其他东西，那么想法保持不变。这里有w3schools 的ajax 教程开头。该示例在从 select 选择名称后显示个人信息，但您可以将输出包装在 select 标记中并为每个输出生成选项。
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.