jQuery: Показывается div, если выбрана опция <select>?

Question

Я работаю на адресной странице корзины покупок. Есть 2 <select> боксы, одна для страны, одна для региона.

Имеются 6 стандартных стран, иначе пользователь должен выбрать «Другая страна». Элементы <option> имеют числовое значение. Другая страна - 241. Что мне нужно сделать, это скрыть регион <select>, если пользователь выбирает другую страну, а также отображает текстовое поле.

Любая помощь МНОГО оценили!

Answer 1

Вам нужно привязать функцию к списку выбора, чтобы при ее изменении ваша функция решила, должен ли отображаться div. Что-то вроде этого ( непроверено, надеюсь синтаксически закрывается). Вот live example.

$(document).ready(function() { 
    $('#YourSelectList').bind('change', function (e) { 
    if($('#YourSelectList').val() == 241) { 
     $('#OtherDiv').show(); 
    } 
    else{ 
     $('#OtherDiv').hide(); 
    }   
    }); 
}); 

Answer 2

Это тот же принцип, что и this question. Вам просто нужно подключиться к изменению при выборе, проверьте val() и hide()/show() div.

Answer 3

На мой взгляд, для этого вам не нужен jQuery.

Этот простой код JavaScript будет делать трюк:

document.getElementById('country_id').onchange = function() 
{ 
    if (this.options[this.selectedIndex].value == 241) { 
     document.getElementById('region_id').style.display = 'block'; 
    } else { 
     document.getElementById('region_id').style.display = 'none'; 
    } 
} 

value работает для большинства браузеров, но да, для старых браузеров вам нужно select.options[select.selectedIndex].value. Я обновил свой сценарий.