title: Dynamic form with Javascript
body: <p>I am making a simple dynamic form using pure Javascript. I have two dropdowns and want to make the second one appear only when certain options from the first one are selected</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form class="form"&gt;
    &lt;div class="form-group"&gt;
      &lt;select id="box1" name="num"&gt;
        &lt;option value="1"&gt;1&lt;/option&gt;
        &lt;option value="2"&gt;2&lt;/option&gt;
        &lt;option value="3"&gt;3&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select id="box2" name="letters"&gt;
        &lt;option value="a"&gt;A&lt;/option&gt;
        &lt;option value="b"&gt;B&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $("#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();
        }
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>But this is not working. How do I make this work?</p>