Good day.

Tell me how to do the following:
There are 2 drop-down lists. The first contains the names of the proclamation, and the second contains their codes. How can I link them so that in the second list the contents change depending on the selected item of the first list?

I am self-taught, I make a website for my company, so please be patient with me.

Update

Here is an example over which I beat my head against the wall:

<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>

I repeat once again: help me to make the selection with the Trousers 1 and Jacket 1 appear in the second when choosing the first list of “Shkilna form”.

  • Updated the question. - Gydzuk pm
  • Are you making a website in Java? - ferrari
  • one
    maybe you need js - soledar10
  • Normally write java is on the server, and you need in the browser (this is the client). If you need to do this in JavaScript then describe the data format. How do they get on your page? How to determine the connection between the first and second lists? - Vladislav Pyatkov
  • @Gydzuk, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

A little govnokoda on the good old js without impurities jquery:

 <select size="1" name="f5" id="f5" onchange="setTypes()"> <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>