Question

我的代码动态生成select元素的选项，但选项的确切值在创建时是未知的。所以正在玩我的select元素的选定值到第一个孩子，但是在1行中无法这样做。我能够分两行，但我想知道是否可能有更短的内容。

<select id="selectElement">
   <option value="1">Optie 1</option>
   <option value="2">Optie 2</option>
</select>

$("#selectElement").val($(this).children(":first").val());

Answer 1

值得注意的是，大多数浏览器会自动为您选择第一个选项。

但是如果你出于某种原因需要这样做：你根本不远，但var select = $("#selectElement"); select.val(select[0].options[0].value);并不是来自该行的第一部分。代替：

selected

或者我发现这更简单：

$("#selectElement")[0].options[0].selected = true;
// or with more jQuery
$("#selectElement > option:first").prop("selected", true);

或者使用该选项的sum属性：

Answer 2

一种方法是使用.eq()选择器。它将匹配元素的集合减少到指定索引处的元素。

请试试这个：

$(selectElement).val($('#selectElement option:eq(0)').val());

参见参考here

如果您想要最短的方法，请尝试以下方法：

$("#selectElement").prop("selectedIndex", 0);

Answer 3

如果你只有一个元素，你应该找到它（使用#id选择器），并且还使用他的选择器来找到孩子。

否则你可以使用（如果你还有更多的元素）使用一个类，并迭代它（代码片段中的第二个脚本）

修改

如果没有js，您只需使用选项的selected属性在页面加载时设置为默认值。

$("#selectElement").val($("#selectElement").children("option:first").val()); $(".selectElement").each(function() { $(this).val($(this).children("option:first").val()); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="selectElement"> <option value="1">Optie 1</option> <option value="2">Optie 2</option> </select> <select class="selectElement"> <option value="21">Optie 21</option> <option value="22">Optie 22</option> </select> <select> <option selected value="321">Optie 321</option> <option value="322">Optie 322</option> </select>

Answer 4

您可以使用:first

来实现此目的

$(document).ready(function () {
         $("#selectElement").val($("#selectElement option:first").val())
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectElement">
   <option value="1">Optie 1</option>
   <option value="2">Optie 2</option>
</select>

Answer 5

无需使用JavaScript设置所选option的第一个元素，因为html会为您执行此操作：

<select id="selectElement">
  <option value="1">Optie 1</option>
  <option value="2">Optie 2</option>
</select>

将select的值设置为该选择的第一个子节点

5 个答案: