Вопрос:
Мне нужно сделать некоторые действия в зависимости от того, какой элемент из моего раскрывающегося списка выбран.
Поэтому мне нужно сделать это, если выбран элемент с префиксом Blue, а затем показать одно текстовое поле ниже, и если какой-либо другой элемент выбран, то покажите некоторые другие вещи, как я могу сделать это самым простым способом?
Больше объяснений: Хорошо… У меня есть раскрывающееся меню, которое содержит список элементов. То, что мне нужно сделать, так это то, что после выбора элемента с префиксом Blue появится поле ввода в раскрывающемся меню. Если они выберут любой другой предмет, произойдет что-то еще.
До сих пор у меня появилось выпадающее меню:
<select id=»select1″ name=»selectz1″> <?php $id = 0; while ($row = mysql_fetch_row($result)) { echo «<option value=$id>$row[0]</option>»; $id++; } ?> </select>
И именно это генерирует HTML:
<form action=»ThisPage.php» method=»POST»> Accounts: <br /> <select id=»select1″ name=»selectz1″> <option value=0>account 2000-01</option><option value=1>account 2000-02</option> <option value=2>blue 2000-03</option><option value=3>blue 2000-04</option> </select> </form> Лучший ответ:
Итак, вопрос, как я понимаю, это: “Как показывать и скрывать поля формы на основе значения a <select>?”
Прежде чем мы начнем, это обман. Я глубоко недоволен качеством ответов там, поэтому я собираюсь летать перед конвенцией и публиковать свои собственные.
Во-первых, все остальные ответы здесь полностью на правильном пути, но в настоящее время они не могут объяснить, почему они делают то, что делают.
Как и другие, я собираюсь использовать jQuery в этом примере. jQuery – это потрясающая библиотека Javascript, которая значительно облегчает множество повторяющихся, многословных задач. jQuery предоставляет функцию с именем $ – yes, только знак доллара, который позволяет вам просматривать и изменять страницу.
Содержание
Шаг 1
Позвольте создать минимальный пример, похожий на существующий код.
<form> <select name=»select1″ id=»select1″> <option value=»1″>account 001</option> <option value=»2″>account 002</option> <option value=»3″>blue 001</option> </select> <input type=»text» name=»text1″ id=»text1″> </form>
Важно отметить:
- Современный HTML требует, чтобы значения атрибутов (value=»1″) указывались.
- Все элементы, которые нам нужно настроить с помощью jQuery, должны быть легко идентифицируемы. Здесь мы используем id.
Шаг 2
Пусть присоединяется прослушиватель событий. События – это события, которые происходят во время взаимодействия со страницей. В нашем случае мы собираемся прослушать <select> для события change.
<script type=»text/javascript»> $(function() { $(‘#select1’).on(‘change’, function(event) { alert(this.value); }); }); </script>
Это много жаргона в небольшом пространстве. Позвольте мне немного пояснить.
- $() – вызов функции jQuery.
- $(function(){… }) передает функцию объекту jQuery. Это ярлык, в котором говорится: “jQuery, когда страница загружена, запустите эту функцию”.
- $(‘#select1’) запрашивает jQuery для поиска id элемента ‘d с помощью select1 “
- $(‘#select1’).on(‘change’, function…) запрашивает jQuery для просмотра события change и выполнения запрошенной функции.
- Наконец, внутри самой функции мы собираемся alert диалог alert с текущим значением элемента select.
Вот демо на jsfiddle.
Шаг 3
Теперь мы запускаем Javascript при каждом изменении меню выбора. Позвольте показать и скрыть это текстовое поле!
Во-первых, нам нужно сделать это скрытым. Поскольку мы показываем и скрываем его с помощью Javascript, мы должны сказать, что он скрывается только при работе Javascript. Скрытие вещей от людей, которые не могут запускать Javascript, делает их сварливыми. Итак, мы добавим новую строку в наш обработчик onload:
$(function() { $(‘#text1’).hide(); $(‘#select1’). // … });
Если вы предположили, что новая строка – “спросить jQuery, чтобы скрыть элемент text1”, вы правильно поняли!
Теперь, как мы наблюдаем за “синими” вариантами? Вернитесь к этому jsfiddle и поиграйте с ним. Вы заметили, что value option предупреждается? Они совсем не голубые! Нам нужно фактически перейти к выбранному option а не только к значению. Это немного смешнее.
Позвольте взглянуть на документацию MDN на <select>. Он сообщает нам, что он будет отображаться как элемент HTMLSelectElement. Не большой сюрприз. Он имеет свойство, называемое selectedIndex, которое указывает нам, какой option был выбран, и имеет свойство, называемое options, которое дает нам прямой доступ к самим параметрам. Милая!
Обновите загрузку снова:
<script type=»text/javascript»> $(function() { $(‘#text1’).hide(); $(‘#select1’).on(‘change’, function(event) { var opt = this.options[ this.selectedIndex ]; alert(‘You picked ‘ + $(opt).text()); }); }); </script>
Опять же, демонстрация jsfiddle.
options есть массив. Javascript, подобно PHP, использует квадратные скобки для доступа к элементам массива.
Итак, мы выбираем наш вариант, а затем завершаем его в jQuery, затем вызываем text метод, чтобы получить текстовый узел внутри элемента, в отличие от значения формы.
Отлично, теперь у нас есть строка. Что мы можем с этим сделать?
Шаг 4
Как и PHP, Javascript имеет регулярные выражения, способ сделать сопоставление шаблонов. Эй, у нас есть образец, с которым можно сравниться!
<script type=»text/javascript»> $(function() { $(‘#text1’).hide(); $(‘#select1’).on(‘change’, function(event) { var opt = this.options[ this.selectedIndex ]; var picked_blue = $(opt).text().match(/blue/i); if(picked_blue) { alert(‘You picked a blue option!’); } else { alert(‘You did not pick a blue option.’); } }); }); </script>
Опять же, демонстрация jsfiddle.
Теперь мы используем метод match объекта String для использования регулярного выражения. В частности, регулярное выражение, которое ищет символы blue, без учета регистра (в конце концов это i).
Этот код должен теперь обнаруживать синие вещи. Время, чтобы наконец скрыть и показать это текстовое поле!
Шаг 5
Пусть погрузится прямо в.
$(function() { $(‘#text1’).hide(); $(‘#select1’).on(‘change’, function(event) { var opt = this.options[ this.selectedIndex ]; var picked_blue = $(opt).text().match(/blue/i); if(picked_blue) { $(‘#text1’).show(); } else { $(‘#text1’).hide(); } }); });
Вы видели это? Можете ли вы догадаться, что он делает?
Вот демо-версия jsfiddle.
И вот мы, миссия. Вы можете применить эту же технику ко всем вещам.
Обратите внимание на ссылки, которые я разбросал по всему сайту, особенно на jsfiddle, что является отличной площадкой для Javascript и HTML, а также на сайтах MDN, которые являются отличной ссылкой на Javascript и HTML. О, и в руководстве jQuery.
Ответ №1
Это можно сделать с помощью Javascript.
Введите id в раскрывающийся список. Когда он выбран, переключите divs в соответствии с его значением. Значение может быть получено, var item= document.getElementById(‘id’).value; , тогда,
function toggle() { var item= document.getElementById(‘yourdropdownid’).value; if(item==’yourfirstoption’) { document.getElementById(‘div1id’).style.display=»block»; document.getElementById(‘div2id’).style.display=»none»; } else if(item==’yoursecondoption’) { document.getElementById(‘div2id’).style.display=»block»; document.getElementById(‘div1id’).style.display=»none»; } }
Пример здесь. Это не точный пример. Но я надеюсь, что вы сможете найти свое решение, связавшись с этим сообщением. Удачи.
Ответ №2<script src=»http://code.jquery.com/jquery.min.js» type=»text/javascript»></script> <script type=»text/javascript»> $(document).on(«change», «#color», function(){ value = $(this).val().split(‘-‘)[0]; // extracting the color prefix from selected value if(value == ‘Blue’) // checking if value is Blue { $(‘#other’).hide(); // hiding the div having id «other» $(‘#blue’).show(); //showing div having id»blue» } else // if selected value have prefix other than Blue { $(‘#blue’).hide(); //hide the div having id «blue» $(‘#other’).show(); // show the div having id «other» } }); </script> <style> /* hiding both divs by default, these div will show up on dropdown change event depending upon the selected value */ #blue, #other{display: none;} </style> <select id=»color» name=»color»> <option value=»»>—Select—</option> <option value=»Blue-value»>Blue</option> <option value=»Red-value»>Red</option> <option value=»Black-value»>Black</option> </select> <div id=»blue»> your blue div </div> <div id=»other»> your other div </div>
