根据另一个选择列表值选择选择列表值答案

【问题标题】：Selecting select list values depending on another select list value根据另一个选择列表值选择选择列表值
【发布时间】：2011-08-18 09:06:59
【问题描述】：

我在网页中有两个选择框（一个用于汽车类型，另一个用于汽车型号），我想使用 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>

我应该在代码中写什么来实现两个下拉列表之间的这种依赖关系？

【问题讨论】：

嗯...<option> 上不能有名字，所以这有点棘手。

标签： javascript html function drop-down-menu onchange

【解决方案1】：

你可以用 HTML + javascript + CSS 来做，但是一旦你的结构变大了，就很难维护了。也很容易打错字，很难测试。更好的解决方案是使用 AJAX - 将所有类别的值存储在数据库中，并使用服务器返回的选项创建新的选择。您将拥有通用解决方案，添加新类别 + 值只是将记录添加到数据库中，无需更改 html + js + css。

更新：

我不确定您使用什么后端语言，如果是 php，那么您可以在这里查看：w3schools ajax example。如果您使用其他东西，那么想法保持不变。在这里你有beginning of ajax tutorial by w3schools。该示例在从 select 中选择名称后显示个人信息，但您可以将输出包装在 select 标记中并为每个输出生成选项。

【讨论】：

当我尝试使用数据库时，我需要使用这种方式作为解决方案，并且数据库语言编码存在问题，因此选项以错误的格式显示并且无法理解。
谢谢，我希望你给我一个适用于我的案例的例子，如问题中所述。