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

Question

我是 JS 的新手，目前正在尝试设置一个表单，当某个国家/地区被选为选择选项时，它将通过使用 display="block"出现第二个选择下拉列表显示=“无”。

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

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

**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";
  }
}

我期待最后一个方法，因为它来自一个与我非常相似的问题，但它产生的只是错误“Uncaught ReferenceError:$ is not defined”

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>