1.1 使用.val()方法直接获取
对于单选select元素,通过选中select元素并调用`.val()`方法,可直接获取当前选中项的value值。这是最常用、最简洁的方法。 代码示例:$("#selectId").val()```html
1.2 通过:selected选择器获取
若需同时获取选中项的文本内容text,可先通过`:selected`选择器定位选中的option元素,再通过`.val()`或`.text()`分别获取value值和文本。 代码示例:$("select option:selected").val()获取value、$("select option:selected").text()获取文本```html <script> var selectedVal = $("select option:selected").val(); var selectedText = $("select option:selected").text(); console.log(selectedVal); // 输出:banana console.log(selectedText); // 输出:香蕉 </script> ```
二、jQuery设置select默认选中状态2.1 按value值设置默认选中
通过`.val("目标value")`方法给select元素赋值,即可让对应value的option选中。适用于已知目标选项value值的场景。 代码示例:$("#selectId").val("targetValue")```html
2.2 按文本内容设置默认选中
若已知目标选项的文本内容,可通过`:contains("文本")`选择器匹配对应option,再用`.prop("selected", true)`设置选中状态。 代码示例:$("select option:contains('目标文本')").prop("selected", true)```html <script> // 设置文本为"广州"的选项选中 $("select option:contains('广州')").prop("selected", true); </script> ```
2.3 按索引设置默认选中
通过`:eq(索引)`选择器指定第n个option索引从0开始,结合`.prop("selected", true)`设置选中。适用于需选中固定位置选项的场景。 代码示例:$("select option:eq(0)").prop("selected", true)```html <script> // 设置第一个选项索引0选中 $("select option:eq(0)").prop("selected", true); </script> ```
三、综合实例:动态操作select 结合获取与设置功能,实现一个整场景:页面加载时默认选中指定选项,点击按钮可切换选中项并获取当前选中值。```html
