Взаимодействие раскрывающихся списков

Question

Взаимодействие раскрывающихся списков

Рейтинг: 0Ответов: 1Опубликовано: 03.02.2015

Доброго времени суток.

Подскажите, как мне сделать следующее:
Есть 2 раскрывающихся списка. В первом находятся названия прокции, а во втором их коды. Как мне их "связать", чтобы во втором списке содержимое менялось в зависимости от выбранного пункта первого списка?

Я самоучка, делаю сайт для своего предприятия, поэтому прошу быть терпеливыми со мной.

Обновление

Вот пример, над которым я бьюсь головой об стену:

<tr>
<td>Оберіть виріб <font color="red">*</font>:</td>
<td>
<select size="1" name="f5">
<option>Шкільна форма</option> 
<option>Жіночий одяг</option>
</select>
<select>
<option>Брюки 1</option> 
<option>Жакет 1</option>
</select>
<select>
<option>Брюки 2</option> 
<option>Жакет 2</option>
</select>
</td>
</tr>

Еще раз повторю: помогите мне сделать, чтобы при выборе с первого списка "Шкільна форма" во втором отображался список с Брюки 1 и Жакет 1.

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Немного говнокода на старом добром js без примесей jquery:

<select size="1" name="f5" id="f5">
<option value=""></option> 
<option value="type1" selected>Шкільна форма</option> 
<option value="type2">Жіночий одяг</option>
</select>
<select name="types" id="types">
<option type="type1" value="value1">Брюки 1</option> 
<option type="type1" value="value2">Жакет 1</option>
<option type="type2" value="value3">Брюки 2</option> 
<option type="type2" value="value4">Жакет 2</option>
</select>

<script>
function setTypes(){
    var type = document.getElementById('f5').value;
    var opts = document.getElementById('types').getElementsByTagName('option');
    document.getElementById('types').selectedIndex = -1; // сбрасываем выбранный элемент
    for(var i = 0, il = opts.length; i < il; ++i){
        // в #types значение атрибута type каждого option сравниваем со значением #f5
        if(opts[i].getAttribute('type') == type){ // если совпадает - показываем
            if(document.getElementById('types').selectedIndex == -1) // устанавливаем выбранный элемент первым из списка
                document.getElementById('types').selectedIndex = i;
            opts[i].style.display = '';
        }
        else{ // не совпадает - скрываем
            opts[i].style.display = 'none';
        }
    }
}
setTypes(); // сразу обрабатываем значения
</script>

Взаимодействие раскрывающихся списков

Ответы