当前位置：首页 > jquery

jquery获取select

2026-04-08 08:16:58jquery

jQuery 获取 select 元素的值和文本

使用 jQuery 获取 <select> 元素的值和选中项的文本有多种方法，以下是常见的操作方式。

获取选中的值

通过 val() 方法可以直接获取 <select> 元素当前选中的值：

var selectedValue = $('select').val();

如果 select 是多选的（multiple），val() 会返回一个数组：

var selectedValues = $('select[multiple]').val();

获取选中的文本

通过 find(':selected') 可以获取选中的 <option> 元素，再通过 text() 获取其文本：

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

或者使用更明确的选择器：

var selectedText = $('select').find(':selected').text();

遍历多选的选项

对于多选 select，可以通过遍历获取所有选中的文本：

var selectedTexts = [];
$('select[multiple] option:selected').each(function() {
  selectedTexts.push($(this).text());
});

监听 select 变化事件

通过 change 事件可以实时获取用户选择的选项：

$('select').on('change', function() {
  var value = $(this).val();
  var text = $(this).find(':selected').text();
  console.log('选中的值:', value, '选中的文本:', text);
});

获取特定 select 的值

如果页面有多个 select，可以通过 ID 或 class 精确选择：

jquery获取select

var value = $('#mySelect').val();
var text = $('.mySelectClass option:selected').text();

注意事项

确保 DOM 加载完成后再执行 jQuery 代码，可以将代码放在 $(document).ready() 中。
对于动态生成的 select 元素，需要使用事件委托来监听变化：
```
$(document).on('change', 'select', function() {
  // 处理逻辑
});
```