Заполнять форму на основе нескольких элементов выбора

Я хочу, чтобы форма имела несколько выпадающих элементов, которые изменяются в зависимости от предыдущего выбора. Вот как я хочу, чтобы он работал.

<select id="format">
<option selected="selected" value="NULL">-- Select a product Format --</option>
<option value="PS3">PS3</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Wii U">Wii U</option>
</select>

Поэтому, если вы выберете PS3, тогда вам придется больше опций для типа продукта PS3

<select id="ps3-product-type">
<option selected="selected" value="NULL">-- Select a product PS3 product type --</option>
<option value="chargers">chargers</option>
<option value="controllers">controllers</option>
<option value="headsets">headsets</option>
</select>

Итак, вы выбираете гарнитуры, например, и получаете другой набор окончательных вариантов продуктов

<select id="ps3-headsets">
<option selected="selected" value="NULL">-- Select a PS3 headset --</option>
<option value="product-1">product 1</option>
<option value="product 2">product 2</option>
<option value="product 3">product 3</option>
</select>

Как я могу сделать это с помощью jquery или PHP? Пожалуйста, имейте в виду, что у меня также будут варианты для Xbox 360 и Wii U тоже.

ОБНОВЛЕНИЕ ПРОГРЕССА:http://jsfiddle.net/maximus83/r7MN9/639/

Вот мой HTML, у меня есть первый набор массивов, работающих над выбором типа продукта. Но я не могу получить 3-й ящик, мне нужно 3-й ящик, чтобы сказать продукт, куда я иду отсюда.

<select id="cat">
 <option val="PS3">PS3</option>
 <option val="Xbox360">Xbox360</option>
 <option val="WiiU">WiiU</option>
 <option val="Multiformat">Multiformat</option>
</select>

Вот мой сценарий

PS3=new Array('Headsets(PS3)','Controllers(PS3)','Chargers(PS3)','Cables(PS3)');
Xbox360=new Array('Headsets(360)','Chargers(360)');
WiiU=new Array('Controllers(WiiU)','Headsets(WiiU)');
Multiformat=new Array('Headsets(Multi)','Chairs(Multi)','Cables(Multi)');

populateSelect();

$(function() {

 $('#cat').change(function(){
 populateSelect();
 });

});


function populateSelect(){
 cat=$('#cat').val();
 $('#item').html('');

 eval(cat).forEach(function(t) { 
 $('#item').append('<option val="#item">'+t+'</option>');


 });
 }
1 ответ

Это должно сделать трюк для вас. Это ранее отредактированный поток по той же теме - как заполнить выпадающее значение на основе значения в другом. Он использует jQuery (и я использовал его перед собой как ссылку).

licensed under cc by-sa 3.0 with attribution.