jquery获取下拉列表选中的文本，语音ic编程基础知识

jquery获取下拉列表选中的文本

下拉列表是一种常用的表单组件，我们在许多网站上都会见到。在网站开发中，获取下拉列表选中的文本是一个十分基础的操作，而使用 jQuery 可以让这一操作变得十分简单。接下来，我们将详细介绍如何使用 jQuery 获取下拉列表选中的文本。

获取选中的值

在 jQuery 中，可以使用.val()方法来获取下拉列表的选中值。例如，下面的代码获取选中项的值：

```javascript

var selectedVal = $('#selectId').val();

```

其中，`#selectId` 为下拉列表的 ID，`.val()` 方法返回的是选中项的值。

获取选中的文本

有时候，我们可能需要获取下拉列表选中项的文本而不是值。在 jQuery 中，可以使用以下两种方式来获取选中项的文本。

方法一

如果下拉列表的选项中有文本值和实际值不同的情况，那么这种方式比较适用。我们可以使用:selected 选择器来选取选中项，然后使用 .text() 方法获取其文本值。例如：

```javascript

var selectedText = $('#selectId option:selected').text();

```

其中，`#selectId` 为下拉列表的 ID，`option:selected` 选取选中的项，`.text()` 方法获取其文本值。

方法二

如果下拉列表的选项中的文本值和实际值是相同的，那么这种方式比较适用。在这种情况下，我们同样可以使用.val() 方法来获取选中的值，但需要将其作为参数传递给 :selected 选择器来选取选中项，然后再使用 .text() 方法获取其文本值。例如：

```javascript

var selectedText = $('#selectId option[value="' + selectedVal + '"]:selected').text();

```

其中，`#selectId` 为下拉列表的 ID，`option[value="' + selectedVal + '"]:selected` 选取选中的项，后面的 `.text()` 方法获取其文本值。

其他相关知识

在实际的应用中，下拉列表往往会被用于构建级联菜单（比如省、市、县三级联动菜单），以及实现多选功能。在这里，我们简单介绍一下这两种应用场景。

级联菜单

级联菜单是指一组菜单，在触发其中一个菜单的选项后，其他菜单自动更新所显示的内容。在网站开发中，常常会用到省、市、县三级联动菜单。在这种情况下，我们需要使用 Ajax 向后台请求数据，并根据返回数据动态生成联动菜单。样例如下：

```javascript

$('#province').change(function () {

$.ajax({

url: 'http://example.com/city.php?province=' + $('#province').val(),

success: function (data) {

// 动态生成城市下拉列表

$('#city').empty();

for (var i in data) {

$('#city').append('' + data[i].name + '');

}

}

});

});

```

其中，`#province` 为省下拉列表的 ID，`#city` 为城市下拉列表的 ID。当省下拉列表的选中值发生变化时，将向后台发送 Ajax 请求，获取城市数据并动态生成城市下拉列表。

多选下拉列表

多选下拉列表是一种特殊的下拉列表，它允许用户多选同一组选项。在 jQuery 中，我们可以使用 .prop() 方法来获取和设置多选下拉列表的选中状态。例如：

```html

选项1

选项2

选项3

```

```javascript

var selectedValArr = $('#multiSelect').val(); // 获取选中值的数组

var selectedTextArr = [];

$('#multiSelect option:selected').each(function () {

selectedTextArr.push($(this).text()); // 获取选中文本的数组

});

```

其中，`.prop('selected', true)` 可以将选项设置为选中状态，`.prop('selected', false)` 可以将选项设置为未选中状态。 .each() 方法用来遍历选中项。