前端开发|表单操作 jq获取下拉框选中项的值，jquery实现下拉菜单选中值的获取方法

🔍 jQuery轻松获取下拉框选中值：前端开发必备小技巧

场景引入：
小张正在开发一个电商筛选页面，用户选择商品分类后需要立刻显示对应结果，当他盯着那个倔强的下拉框时突然卡壳——"怎么用jQuery拿到用户选中的值啊？" 🤔 别急，今天我们就用5分钟彻底搞定这个高频需求！

基础版：直接获取选中值

// 假设下拉框HTML结构如下：
// <select id="category">
//   <option value="fruits">水果</option>
//   <option value="electronics" selected>数码产品</option>
// </select>
// 🎯 核心代码：
$('#category').val(); // 返回"electronics"

原理：
jQuery的.val()方法会自动返回当前选中项的value属性，就像魔法师挥动魔杖一样简单 ✨

常见坑点：

• 如果没设置value属性，则返回option的文本内容
• 多选下拉框需要用数组接收（后面会讲）

进阶版：获取显示文本

有时候我们需要展示用户看到的文字（比如生成友好提示）：

// 🌈 获取显示文本两种方式：
// 方法1：找到被选中的option再取文本
$('#category option:selected').text(); // 返回"数码产品"
// 方法2：用DOM原生属性
$('#category').find('option:selected').html();

特殊场景处理

多选下拉框（multiple select）

<select id="colors" multiple>
  <option value="red">红色</option>
  <option value="blue" selected>蓝色</option>
  <option value="green" selected>绿色</option>
</select>

// �‍ 需要数组接收多个值：
const selectedColors = $('#colors').val(); 
// 返回 ["blue", "green"]

动态监听变化

// 👂 实时监听选择变化：
$('#category').on('change', function() {
  alert('用户选择了：' + $(this).val());
});

兼容旧版jQuery

如果你维护的老项目用的jQuery 1.4：

// ⏳ 怀旧写法：
$('#category').attr('value');

调试小技巧

遇到问题？打开浏览器控制台试试这些：

// 1. 检查所有选项值
console.log($('#category option').map((i,o) => o.value).get());
// 2. 确认选中状态
$('#category option').each(function() {
  console.log($(this).val(), '选中状态：', this.selected);
});

为什么推荐jQuery方案？

虽然现代前端可以用document.querySelector原生实现，但jQuery依然有三大优势：

1. 代码简洁：相比原生JS减少40%代码量
2. 完美兼容：自动处理IE8+的怪异模式
3. 链式调用：可以流畅接后续操作

（数据来源：2025年前端工具调研报告）

总结流程图：

用户操作下拉框 → jQuery捕获change事件 →  
获取.val() → 发送给后端/更新界面

下次再遇到下拉框取值需求，记得掏出这个小抄哦！ 🚀 如果觉得有用，不妨点个收藏⭐️~