Select下拉选择onchange事件

现在要实现这样一个效果
网页下拉选择选择，自动更新页面内容
下拉选择是select标签，自动更新页面内容，可以通过onchange事件实现

onchange定义

当元素的值发生改变时，会发生 onchange 事件。

对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。

提示：该事件类似于 oninput 事件。不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 <select> 元素。

使用

有若干种方式

1. 在select标签设置 onchange属性

<!DOCTYPE html>
<html>
<body>
<p>请从列表中选择一辆新车。</p>
<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<p>当您选择一辆新车时，会触发一个函数，输出所选汽车的值。</p>
<p id="demo">You selected: </p>
<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

如示下例

请从列表中选择一辆新车。

当您选择一辆新车时，会触发一个函数，输出所选汽车的值。

You selected:

2. 使用jQuery动态添加 onchange属性

引入jquery <script src="/js/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<body>
  <script src="/js/jquery.min.js"></script>
<p>请从列表中选择一辆新车。</p>
<select id="mySelect2" >
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Mercedes">Mercedes</option>
  <option value="Volvo">Volvo</option>
</select>
<p>当您选择一辆新车时，会触发一个函数，输出所选汽车的值。</p>
<p id="demo2">You selected: </p>
<script type="text/javascript">
	$( document ).ready(function() {
    $("#mySelect2").change(function(){
      update();
    })
  })
  function update() {
    let mySelect2 = $("#mySelect2").val();
    console.log("You selected: " + mySelect2);
    demo2.innerText = ("You selected: " + mySelect2).toLocaleString();
  }
</script>
</body>
</html>

如示下例