Чёт не лезет в голову как обойти проблему не нагромождая её ненужными элементами.
Пытаюсь сделать что то вроде карточки, в которой по селекту выбирается пункт меню и исходя из него скрываются определённые строки из таблицы и показываются только нужные.
Вот код:
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <script>
- function type_obj(){
- select=document.getElementById("select_obj");
- sist=document.getElementsByClassName('sist');
- print=document.getElementsByClassName('print');
- switch(select.options[select.selectedIndex].text){
- case 'Системный блок':
- var i;
- for (i = 0; i < sist.length; i++) {
- sist[i].hidden=false;
- }
- var j;
- for (j = 0; j < print.length; j++) {
- print[j].hidden=true;
- }
- break;
- case 'Принтер':
- case 'МФУ':
- var i;
- for (i = 0; i < sist.length; i++) {
- sist[i].hidden=true;
- }
- var j;
- for (j = 0; j < print.length; j++) {
- print[j].hidden=false;
- }
- break;
- }
- }
- </script>
- <select id="select_obj" onchange="type_obj()"><optgroup><option disabled selected value>Выбирите значение</option><option>Принтер</option><option>МФУ</option><option>Системный блок</option></optgroup></select>
- <table border="1">
- <thead>
- <tr>
- <th colspan="2">Заполните данные</th>
- </tr>
- </thead>
- <tbody>
- <tr class="sist" hidden="">
- <td>CPU</td>
- <td></td>
- </tr>
- <tr class="sist" hidden="">
- <td>RAM</td>
- <td></td>
- </tr>
- <tr class="sist" hidden="">
- <td>Drive</td>
- <td></td>
- </tr>
- <tr class="sist" hidden="">
- <td>OS</td>
- <td></td>
- </tr>
- <tr class="print" hidden="">
- <td>Формат</td>
- <td></td>
- </tr>
- <tr class="print" hidden="">
- <td>Тип</td>
- <td><select><optgroup><option>Лазерный</option><option>Струйный</option></select></td>
- </tr>
- <tr class="print" hidden="">
- <td>Картридж</td>
- <td></td>
- </tr>
- </tbody>
- </table>