时间戳

首页 > 解决方案 > 为什么 jQuery option:selected 在未选择任何内容时返回第一个选项

jquery - 为什么 jQuery option:selected 在未选择任何内容时返回第一个选项

问题描述

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

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

链接到小提琴：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>

标签： jquery

解决方案

这是个好问题。查了一下源码，好像jQuery会返回selectedIndex下的值，下面两种情况都是0

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

That also means your select will tr​​igger onchange when the first actual value is selected AND HTML5 validation will make a requiredwork

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>

推荐阅读