使用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(); 
    } 
}); 

編輯：

這裏是一個鏈接到一個工作演示：

https://jsfiddle.net/pt5yyuLz/

Answer 2

只使用jquery或只有JS更可讀和可保存。

你的錯誤：你已經使用=代替==一個比較

事件：用途：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>