jquery select 默认选中事件

原创

mob64ca12f10f72 2023-08-17 05:42:32 ©著作权

文章标签 文本框 jQuery 下拉列表 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f10f72的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery Select 默认选中事件

概述

在Web开发中，我们经常需要使用下拉列表（select）来让用户选择某个选项。在某些情况下，我们需要在页面加载时就默认选中某个选项。jQuery提供了简洁的方法来实现这个功能。

本文将介绍如何使用jQuery来实现下拉列表的默认选中事件，同时提供代码示例和详细解释。

代码示例

下面是一个简单的HTML页面，包含一个下拉列表和一个显示选中结果的文本框。

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

<input type="text" id="result" readonly>

在页面加载完成后，我们希望默认选中第二个选项，并将选中结果显示在文本框中。下面是使用jQuery实现这个功能的代码：

$(document).ready(function() {
  // 默认选中第二个选项
  $("#mySelect option:eq(1)").prop("selected", true);
  
  // 显示选中结果
  $("#result").val($("#mySelect option:selected").text());
});

在上面的代码中，我们使用了$(document).ready()方法来确保页面加载完成后再执行代码。$("#mySelect option:eq(1)")表示选中第二个选项，prop("selected", true)方法将其设置为选中状态。

注意，下标从0开始计算，所以第二个选项的下标为1。

最后，使用$("#result").val()方法将选中结果显示在文本框中。$("#mySelect option:selected")表示当前选中的选项，text()方法获取其文本内容。

解释

我们来逐步解释上面代码中的关键部分。

默认选中选项

要默认选中某个选项，我们需要通过其索引或值来获取该选项，并将其设置为选中状态。

在上面的代码中，我们使用了$("#mySelect option:eq(1)")来获取第二个选项。$("#mySelect")表示选择id为"mySelect"的下拉列表，option:eq(1)表示选择索引为1的选项。

然后，使用prop("selected", true)方法将其设置为选中状态。

显示选中结果

要显示选中结果，我们需要获取当前选中的选项，并将其文本内容设置到文本框中。

在上面的代码中，我们使用了$("#mySelect option:selected")来获取当前选中的选项。$("#mySelect option")表示选择所有的选项，:selected表示选择当前选中的选项。

然后，使用text()方法获取其文本内容，并使用val()方法将其设置到文本框中。

完整代码

下面是完整的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Select 默认选中事件</title>
  <script src="
</head>
<body>
  <select id="mySelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
  </select>

  <input type="text" id="result" readonly>

  <script>
    $(document).ready(function() {
      // 默认选中第二个选项
      $("#mySelect option:eq(1)").prop("selected", true);
      
      // 显示选中结果
      $("#result").val($("#mySelect option:selected").text());
    });
  </script>
</body>
</html>