Question

我在网页中有两个选择框（一个用于Car Types，另一个用于Car Models），我想根据另一个使用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>

我应该在代码中编写什么来在两个下拉列表之间执行这种依赖？

Answer 1

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

更新：

我不确定你使用的是哪种后端语言，如果它是php，那么你可以看看这里：w3schools ajax example。如果你使用别的东西，那么想法仍然是一样的。你有beginning of ajax tutorial by w3schools。该示例在从select中选择名称后显示个人信息，但您可以将输出包装在select标签中并为每个输出生成选项。

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

1 个答案: