Question

我有一个带有<select>个标签的html <option>标记。像这样：

<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”选项并保留在“选择选项”选项中！但是当我使用

时

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

这是正确的！问题是什么？任何帮助都会非常感激。

Answer 1

试试这个

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

上面提到的代码可以使用。

即使下面提到你的代码也可以，但是脚本部分应该在所有HTML代码之下和body关闭标记之前。因为一旦jQuery或javaScript在那时开始执行，HTML DOM将可用，并且脚本可以选择该DOM。

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

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

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

Answer 2

在加载所有资源后调用

页面加载，而在加载dom时调用jquery ready，以便在加载之前调用基本就绪。因此它不起作用

jquery .val（）下拉列表中的奇怪行为

2 个答案: