带有 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>