Динамическая форма с Javascript

Question

Я делаю простую динамическую форму, используя чистый Javascript. У меня есть две выпадающих и хочу сделать вторую один появляются только тогда, когда некоторые опции из первой выбраны

HTML:

<form class="form"> 
    <div class="form-group"> 
    <select id="box1" name="num"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 

    <select id="box2" name="letters"> 
     <option value="a">A</option> 
     <option value="b">B</option> 
    </select> 
    </div> 
</form> 

Javascript:

<script type="text/javascript"> 
    $("#box1").onchange = function() { 
     var box1 = document.getElementById("box1"); 
     var value = box1.options[box1.selectedIndex].value; 

     if (value = "1" || value = "2") { 
      $("#box2").show(); 
     } else { 
      $("#box2").hide(); 
     } 
    }; 
</script> 

Но это не работает. Как это сделать?

Answer 1

Есть несколько проблем. Во-первых, ваше мероприятие должно быть изменено следующим образом:

$("#box1").on('change', function() { 

Далее, ваша условная логика использует один «=», который присваивает значение. Это должно быть изменено на двойное или тройное равное, которое проверяет равенство. См. Разницу здесь: JavaScript performance difference between double equals (==) and triple equals (===).

if (value = "1" || value = "2") { 

Вот окончательный код:

$("#box1").on('change', function() { 
    var value = $(this).val(); 

    if (value === "1" || value === "2") { 
     $("#box2").show(); 
    } else { 
     $("#box2").hide(); 
    } 
}); 

Edit:

Вот ссылка на рабочий демо:

https://jsfiddle.net/pt5yyuLz/

Answer 2

Используйте только JQuery или только JS более прозрачный и универсальный.

Ваша ошибка: вы использовали = вместо == для сравнения

Event: использование: selector.change() или selector.on("change",...)

Вот пример с только Jquery

$(document).ready(function(){ 
 
    $(".seconddrop").hide(); 
 
    
 
    $(".firstdrop").change(function(){ 
 
    if($(this).val()==1 || $(this).val()==2) 
 
     $(".seconddrop").show(500); 
 
    else 
 
     $(".seconddrop").hide(500); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="firstdrop"> 
 
    <option value="0">blabla</option> 
 
    <option value="1">show dropdown 2</option> 
 
    <option value="2">show dropdown 2</option> 
 
</select> 
 

 
<select class="seconddrop"> 
 
    <option value="0">blabla</option> 
 
    <option value="1">blabla</option> 
 
    <option value="2">blabla</option> 
 
</select>