Выбор значений списка выбора в зависимости от другого значения списка выбора - PullRequest
Новая
       14

Выбор значений списка выбора в зависимости от другого значения списка выбора

0 голосов
/ 18 августа 2011

У меня на веб-странице есть два поля выбора (одно для типов автомобилей и другое для моделей автомобилей), и я хотел бы изменить одно из них в соответствии с другим с помощью 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>

Что я должен написать в коде, чтобы выполнить эту зависимость между двумя выпадающими списками?

1 Ответ

0 голосов
/ 18 августа 2011

Вы можете сделать это в HTML + javascript + CSS, однако, как только ваша структура вырастет, ее будет очень сложно поддерживать. Это также легко сделать опечатку, и это трудно проверить. Лучшим решением было бы использовать AJAX - сохранить значения для всех категорий в базе данных и создать новый выбор с параметрами, возвращаемыми сервером. У вас будет общее решение, и добавление новых категорий + значений - это просто добавление записей в базу данных, не нужно менять html + js + css.

UPDATE:

Я не уверен, какой язык бэкэнда вы используете, если это php, вы можете посмотреть здесь: пример w3schools ajax . Если вы используете что-то другое, то идея остается прежней. Здесь у вас есть начало учебника по ajax от w3schools . В примере отображается личная информация после выбора имени из select, но вы можете просто обернуть вывод в тег select и сгенерировать option для каждого out.

...