jquery下拉框回显

原创

mob649e8166179a 2023-08-20 05:25:54 ©著作权

文章标签 jquery 下拉框库文件 文章分类 jQuery 前端开发

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

jquery下拉框回显

介绍

下拉框是网页开发中常见的元素之一，用于提供用户选择的选项。在某些情况下，我们需要在页面加载时将下拉框设置为预设的选项，这就需要用到下拉框的回显功能。本文将介绍如何使用jquery实现下拉框的回显，并提供相应的代码示例。

准备工作

在开始之前，我们需要准备好以下两个资源：

引入jquery库：在<head>标签中引入jquery库，可以通过CDN链接引入或者将jquery库文件放在本地项目中。

<script src="

定义下拉框的HTML结构：在<body>标签中定义一个<select>标签作为下拉框，并在其中添加多个<option>标签作为选项。

<select id="mySelect">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  ...
</select>

实现下拉框回显

下面我们将介绍两种常见的下拉框回显方式：通过设置选中的option的value和通过选中的option的索引。

1. 通过设置选中的option的value

首先，我们需要获取到下拉框的jquery对象，可以通过id选择器或其他方式获取。

var select = $('#mySelect');

然后，我们可以使用.val()方法来设置下拉框的选中值。这个方法接受一个参数，即要设置为选中的option的value。

select.val('option2');

完整的代码如下：

$(document).ready(function() {
  var select = $('#mySelect');
  select.val('option2');
});

2. 通过选中的option的索引

同样地，我们首先需要获取到下拉框的jquery对象。

var select = $('#mySelect');

然后，我们可以使用.prop()方法来设置下拉框中某个option的selected属性为true，从而实现选中该option。

select.find('option:eq(1)').prop('selected', true);

完整的代码如下：

$(document).ready(function() {
  var select = $('#mySelect');
  select.find('option:eq(1)').prop('selected', true);
});

示例演示

下面我们将通过一个完整的示例来演示上述两种下拉框回显的方法。

HTML代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>下拉框回显示例</title>
  <script src="
</head>
<body>
  <select id="mySelect">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
  <button id="btnSetOption1">设置为选项1</button>
  <button id="btnSetOption2">设置为选项2</button>
</body>
</html>

JS代码

$(document).ready(function() {
  var select = $('#mySelect');
  
  $('#btnSetOption1').click(function() {
    select.val('option1');
  });
  
  $('#btnSetOption2').click(function() {
    select.find('option:eq(1)').prop('selected', true);
  });
});

在上述示例中，我们定义了两个按钮，分别用于设置下拉框为选项1和选项2。点击按钮后，下拉框会根据不同的方法进行相应的回显操作。