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

Question

我是 JS 新手，目前正在尝试设置一个表单，当某个国家被选为选择选项时，它将通过使用 display="block" to display= 导致出现第二个选择下拉列表“没有任何”。

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

在尝试对我当前的问题使用相同的原则并且该方法不起作用后，因为我很确定我使用的术语不适用，我开始浏览更多论坛并尝试了两种似乎最适用的方法我的问题，但是两者都不起作用。

**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>