Question

我是JS的新手，目前正在尝试建立一种表单，当选择某个国家作为选择选项时，它将通过使用display =“ block”来显示第二个选择下拉列表显示=“ none”。

在该项目的早期，我能够完成类似的操作，其中某个无线电输入会导致文本输入通过前面提到的显示原理出现。我在另一个论坛上轻松实现了这一目标。

在尝试对当前问题使用相同的原理并且该方法不起作用之后，因为我敢肯定我所使用的术语不适用，所以我开始在更多论坛中寻找并尝试了两种似乎可以解决问题的方法最适合我的问题，但是两者都不起作用。

**HTML**
<select name="country" id="country" required onchange="showState()">
  <option value="" disabled selected="selected" hidden>Country</option>
  <option value="australia" id="australia">Australia</option>
  <option value="england">England</option>
</select><br>
<select name="state" id="state">
<option>'s...
</select>

**JavaScript method 1**
function showState() {
  var australia = document.getElementById("australia");
  var state = document.getElementById("state");

  if (this.options[this.selectedIndex] == australia){
    state.style.display = "block";
  } else {
    state.style.display = "none";
  }
}

**JavaScript method 2**
function showState() {
  var theValue = $(this).find('option:selected').text();
  var state = document.getElementById("state");

  if($(this).find('option:selected').val() === 'australia') {
    state.style.display = "block";
  } else {
    state.style.display = "none";
  }
}

我期望最后一种方法是因为它与我的问题非常相似，但是它产生的只是错误“未捕获的ReferenceError：$未定义”

Answer 1

如果您使用的是Jquery，则可以通过一种更简单的方式来实现。当然，不要忘记导入Jquery库。

function showState() {
  if ($("#country option:selected").val() === "australia") {
    $("#state").show()
  }
  else {
    $("#state").hide()
  }
}
$("#country").change(showState)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country" required>
  <option value="" disabled selected="selected" hidden>Country</option>
  <option value="australia" id="australia">Australia</option>
  <option value="england">England</option>
</select><br>
<select name="state" id="state">
  <option>Queensland</option>
  <option>Victoria</option>
</select>

选择特定选择选项时如何调用函数？

1 个答案: