javascript - jquery .val() 下拉菜单上的奇怪行为

Question

我有一个html <select>标记一些 <option> s。像这样的事情:

<select id="season">
    <option value="">Select an option</option>
    <option value="1">Spring</option>
    <option value="2">Summer</option>
    <option value="3">Autumn</option>
    <option value="4">Winter</option>
</select>

我有这个 JavaScript 代码:

<script>
   $(document).ready(function(){
       $("#season").val("1");
   });
</script>

这不会选择“Spring”选项并保留在“Select an option”选项中!但是当我使用

$(document).ready(function(){
       setTimeout(function(){
           $("#season").val("1");
       }, 100)
   });

这工作正常!问题是什么？任何帮助将不胜感激。

Answer 1

试试这个

<script>
$(document).ready(function(){
  $("option[value='1']").attr('selected','selected');
});
</script>

上面提到的代码可以工作。

即使在下面提到您的代码也可以工作，但脚本部分应该位于所有 HTML 代码下方和正文关闭标记之前。因为一旦 jQuery 或 javaScript 开始执行，HTML DOM 将可用，并且脚本可以选择该 DOM。

<script>
 $("#season").val("1");
</script>

在您的代码中，一旦添加 setTimeout 并且您的脚本能够选择该选项，因为您延迟了 100 微秒，这意味着在执行脚本之前 HTML DOM 可用，这就是您的原因能够选择 DOM

<script>
 setTimeout(function(){
  $("#season").val("1");
 }, 100)
</script>