当页面使用JavaScript / jQuery加载时，如何获取选择框的第一个选项以自动显示在div中？

Question

这是我目前拥有的代码。 页面加载后，如何使Apple自动在选择框下方打印？

<script>
function getOption() {
    var obj = document.getElementById("mySelect");
    document.getElementById("demo").innerHTML = 
    obj.options[obj.selectedIndex].text;
}
</script>

<form>
Select your favorite fruit:
<select id="mySelect" onchange="getOption()">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<br><br>
</form>

<p id="demo"></p>

Answer 1

使用jquery会更容易。 该代码将是：

$(document).ready(function(){
    var value = $("#mySelect option:first").val();
    $("#mySelect").after("<div>"+value +"</div>");
});

Answer 2

如果您不使用jQuery，则可以尝试以下操作：

<script>
function getOption() {
    var obj = document.getElementById("mySelect");
    document.getElementById("demo").innerHTML = 
    obj.options[obj.selectedIndex].text;
}

document.addEventListener('DOMContentLoaded',function(){
    getOption();
});
</script>

页面加载后，它只是在调用您的函数。