Показать/скрыть div на основе выбранного значения параметра в Javascript

Question

Интересно, почему он не работает.

Вот мои JS:

$("#cat-code").change(function(){ 
    var value = $("#cat-code option:selected").val(); 
    if (value == "10400000"){ 
    $("#div1").show(); 
    $("#div2").hide(); 
    } 
}); 

Select Tag:

<select class="cat-code" id="cat-code" name="project_procurement_management_plan[items_attributes][0][category_id]"> 
    <option value="1">10400000</option> 
    <option value="2">10401000</option> 
</select> 

Divs, чтобы показать или скрыть:

<div class="div1">hi</div> 
<div class="div2">hello</div> 

будут оценены любые обходные пути. Благодарю.

Answer 1

Вы определенно установить значения 1 и 2, так что, вероятно, что они тогда:

$("#cat-code").change(function(){ 
    var value = this.value; 
    if (value == "1"){ 
    $(".div1").show(); 
    $(".div2").hide(); 
    } 
}); 

FIDDLE

Варианты текст будет использоваться только как значение выбора, если параметр не имеет значения, и для получения выбранного значения все, что вам нужно, - this.value внутри обработчика для th e выберите.

Answer 2

Похоже, что ваш JS является ссылкой на объекты DOM с идентификаторами, но ваш HTML имеет классы.

Попробуйте JS вместо:

$(".div1").show(); 
$(".div2").hide();