根據另一個選擇列表值選擇選擇列表值

Question

我在網頁中有兩個選擇框（一個用於汽車類型，另一個用於汽車型號），我想使用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-在數據庫中存儲所有類別的值，並使用服務器返回的選項創建新的select。 您將擁有通用的解決方案，添加新的category +值只是將記錄添加到數據庫中，而無需更改html + js + css。

更新：

我不確定您使用哪種后端語言，如果是php，那么您可以在這里看看： w3schools ajax example 。 如果您使用其他東西，則想法保持不變。 在這里，您可以了解w3schools編寫的Ajax教程。 該示例在從select中選擇一個名稱后顯示個人信息，但是您可以將輸出包裝在select標記中，並為每個輸出生成選項。

根據另一個選擇列表值選擇選擇列表值

問題描述

1 個解決方案

解決方案1
0 已采納 2011-08-18 09:13:02

根據另一個選擇列表值選擇選擇列表值

問題描述

1 個解決方案

解決方案1 0 已采納 2011-08-18 09:13:02

解決方案1
0 已采納 2011-08-18 09:13:02