Скройтесь/Покажите <выбирают> в зависимости от другого <выбор>
Я имею два <select> элементы. Первый содержит страны (например, США, Канада, Англия, Россия, Польша...), и второй скрыт, содержа города только из США и Канады (например, Нью-Йорк, Лос-Анджелес, Чикаго... ИЛИ Оттава, Ванкувер, Суррей...)
Если пользователь выбирает Канаду или США сначала <select>, второе должно показать и позволить ему выбирать свой город.
Можно ли это сделать? Я посетил столько веб-сайтов с Ajax и формами Проверки JQuery и не нашел, что некоторый подобный источник сделал это.
Спасибо.
2 ответа
Прослушайте событие изменения для списка select. В событии изменения, если выбранное значение равно "США" или "Канада", покажите другой список выбора, в противном случае скройте его.
Смотрите пример.
Предположим, что структура select выглядит так:
<select id="countries">
<option val="USA">USA</option>
<option val="Canada">Canada</option>
<option val="Australia">Australia</option>
...
</select>
<select id="cities">
<option val="Vancouver">Vancouver</option>
<option val="New York">New York</option>
...
</select>
Прослушайте событие изменения массива countries.
$("#countries").change(function() {
// find the selected country
var selectedCountry = $(this).val();
// if US or Canada
if(selectedCountry == "USA" || selectedCountry == "Canada") {
// show the cities list
$("#cities").show();
}
// otherwise hide it
else {
$("#cities").hide();
}
});
Все очень просто.
Во-первых, подготовьте обработчик события change http://api.jquery.com/change/
Во-вторых, проверьте значение вашего select val : http://api.jquery.com/val/
В-третьих, отобразите или скройте ваш второй select. http://api.jquery.com/hide/ или http://api.jquery.com/show/