jquery - 为什么 jQuery 选项 :selected return first option when nothing is selected

Question

当我在没有选择选项的选择上使用 alert($("select").find("option:selected").val()); 时，jQuery 会提醒以下值选择中的第一个元素。

为什么会这样，如何获得预期的返回值 '' 甚至 undefined？

fiddle 链接:jsfiddle

alert($(".select").find("option:selected").val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>

Answer 1

这是个好问题。经过研究源代码，似乎jQuery会返回selectedIndex下的值，并且在下面的两种情况下它都是0

我的建议是设置一个没有值的“请选择” - 您可以禁用它，这样它就不会发送到服务器。

这也意味着当选择第一个实际值时，您的选择将触发 onchange，并且 HTML5 验证将使 required 工作

console.log($(".select1 option:selected").val(),
            $(".select2 option:selected").val());
console.log($(".select1")[0].selectedIndex,
            $(".select2")[0].selectedIndex);  
$(".select1 option").each(sel => console.log(sel.defaultSelected) )
$(".select2 option").each(sel => console.log(sel.defaultSelected) )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select1">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>

<select class="select2">
  <option value="">Please select</option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>