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

Question

Here's the code that I have at the moment. How can I get Apple to print below the select box automatically when the page loads?

<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

It will be easier for you to use jquery. The code will be:

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

Answer 2

If you're not using jquery, you can try this:

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

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

It's just calling your function once the page has loaded.