Question

我有像这样的HTML代码，

<select id="select1">
<option value="1">..<option>
 ..
</select>

<div id="select2" style="display:none;"></div>
<div id="select3" style="display:none;"></div>

如果选择了一个选项，则会显示相应的div。我使用的代码是

$("#select1").change(function() {
    if($(this).val() == 1) {
        $("#select2").show();
    } else {
        $("#select2").hide();
    }
    if($(this).val() == 2) {
        $("#select3").show();               
    } else {
        $("#select3").hide();
    }
    if($(this).val() == 3) {
        $("#select4").show();
    } else {                
        $("#select4").hide();
    }
});

如果显示一个div，我再次使用相同的脚本显示另一个显示/隐藏textarea的选择。

<div id="select2">
 <select id="select4"></select>
 <textarea id="select5" style="display:none;"></textarea>

<script>
$("#select4").change(function() {
    if($(this).val() == 1) {
      $("#select5").show();
    } else {
      $("#select5").hide();
    }
});
</script>

但是textarea并没有显示出来。

Answer 1

嗯，您显示的HTML在select中没有选项元素，因此select将没有值。

如果HTML实际上不同，您应该编辑您的问题。

Answer 2

试试这个，希望它符合您的期望：

$("#select1").change(function() {
  if ($(this).val() == 1) {
    $("#select2").show();
  } else {
    $("#select2").hide();
  }
  if ($(this).val() == 2) {
    $("#select3").show();
  } else {
    $("#select3").hide();
  }

});


$("#select4").change(function() {
  if ($(this).val() == 1) {
    $("#select5").show();
  } else {
    $("#select5").hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select1">
  <option value="1">1
  </option>
  <option value="2">2
  </option>
  <option value="3">3
  </option>

</select>


<div id="select3" style="display:none;">div2</div>


<div id="select2" style="display:none;">
  <select id="select4">
    <option value="1">1
    </option>
    <option value="2">2
    </option>
  </select>
  <textarea id="select5" style="display:none;"></textarea>
</div>

嵌套隐藏，显示javascript无法正常工作

2 个答案: