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 () {

接下来，您的条件逻辑使用单个'='，其中指定该值。应将其更改为double或triple equals，以检查是否相等。请在此处查看不同之处：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>

使用Javascript的动态表单

2 个答案: