В js не силен, да и в приведенных в данном разделе темах не совсем то, что мне нужно. в форме есть два селекта: Код (PHP): <form action="#" method="post"> <select class="s1"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> <select class="s2"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> <option value="8">option 8</option> <option value="9">option 9</option> </select> <form> Данные в селектах никак не связаны, мне нужно, что бы первоначально на странице был один, а при любом выборе в первом - появлялся второй. Есть ли что-то наподобии такого, в качестве примера?
Лови, для примера: Код (Text): <!DOCTYPE HTML> <html> <head> <style> .s1 { visibility: visible; } .s2 { visibility: hidden; } </style> </head> <body> <form action="#" method="post"> <select id="first_select" class="s1"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> <select id="second_select" class="s2"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> <option value="4">option 4</option> <option value="5">option 5</option> <option value="6">option 6</option> <option value="7">option 7</option> <option value="8">option 8</option> <option value="9">option 9</option> </select> <form> <script> var mySelect = document.getElementById("first_select"); mySelect.onchange = function(e){ document.getElementById("second_select").className = "s1"; } </script> </body> </html> Добавлено спустя 1 минуту 39 секунд: Да, если открыть селект и выбрать тот же первый пункт, что выбран по умолчанию, второй селект не появится. Эта задачка тебе как домашнее задание будет, чтобы не все коту масленица
Для 3-х и более чего-то не получается =\ Код (PHP): <!DOCTYPE HTML> <html> <head> <style> .s1 { visibility: visible; } .s2 { visibility: hidden; } .s3 { visibility: hidden; } </style> </head> <body> <form action="#" method="post"> <select id="first_select" class="s1"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> <select id="second_select" class="s2"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> <select id="third_select" class="s3"> <option value="1">option 1</option> <option value="2">option 2</option> <option value="3">option 3</option> </select> <form> <script> var mySelect = document.getElementById("first_select"); var mySelect2 = document.getElementById("second_select"); mySelect.onchange = function(e){ document.getElementById("second_select").className = "s1"; } mySelect2.onchange = function(e){ document.getElementById("third_select").className = "s2"; } </script> </body> </html>
Потому что фигню написал, потому и не получается. Разберись внимательно, что происходит Добавлено спустя 2 минуты 40 секунд: 1) Зачем тебе класс s3? 2) Зачем ты третьему селекту присваиваешь s2, в котором прописал hidden? Ты не там увидел алгоритм, где надо. Добавлено спустя 1 минуту 23 секунды: Всем скрытым селектам ставь s2, а чтобы сделать их видимыми, ставь s1. Если селектов планируется неизвестное количество, гугли "JavaScript делегирование" и делай через него обработку универсального события.
А если мне нужно, что бы вместо третьего селекта появилась кнопка? Я присвоил ей класс s1 -> она появляется после выбора предыдущих двух селлектов, но с стилями .s1 а у нее другие стили вынесенные в класс .btn
Любому объекту можно присваивать произвольное количество классов. При этом свойства, описанные в классах, подключенных последними, перекрывают свойства классов, подключенных ранее. Изучи CSS чтоли, для начала.