Скрыть / Показать <select>в зависимости от других <select>

Question

У меня есть два <select> элемента. Первый содержит страны (например, США, Канада, Англия, Россия, Польша ...), а второй скрыт, содержит города из только США и Канады (например, Нью-Йорк, Лос-Анджелес, Чикаго. .. ИЛИ Оттава, Ванкувер, Суррей ...)

Если пользователь выбирает Канаду или США из первого <select>, второе должно показать и позвольте ему выбрать свой город.

Возможно ли это сделать? Я посетил очень много веб-сайтов с формами Ajax и JQuery Validation и не нашел аналогичного источника для этого.

Спасибо.

Answer 1

Прослушайте событие изменения для списка выбора. В случае изменения, если выбрано значение «США» или «Канада», отобразите другой список выбора, в противном случае скрывайте его.

См. пример .

Предполагая, что структура выбора выглядит следующим образом:

<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").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();
    }
});

Answer 2

Это действительно просто.
Прежде всего подготовьте change обработчик событий http://api.jquery.com/change/
Во-вторых, проверьте значение вашего выбора val: http://api.jquery.com/val/
Третий, показать или скрыть ваш второй select.http://api.jquery.com/hide/ или http://api.jquery.com/show/