【前端】用jquery或js获取select标签中选中的option值及文本

简介: 用jquery或js获取select标签中选中的option值及文本

一、示例

<selectid="selectedTest"οnchange="doSomething();"><optionvalue="abc">北京</option><optionvalue="edf">上海</option><option>上海</option></select>

二、获取option的文本

// 方法一:获取select标签选中的option中的文本。
$("#selectedTest option:selected").text()      --------->  例如北京、上海
// 方法二:获取select标签选中的option中的文本。
$("#selectedTest").find("option:selected").text()      --------->  例如北京、上海


// 获取select标签选中的option中的文本。
document.querySelector('#selectedTest option:checked').text;
// 将北京这个文本值赋值给option中的文本,通常用于回显数据操作。
document.querySelector('#selectedTest').value = '北京';

三、获取option中value的值

// 方法一:获取select标签选中的option中的value的值。
$("#selectedTest option:selected").val()               --------->  例如abc、edf
// 方法二:获取select标签选中的option中的value的值。
$("#selectedTest").find("option:selected").val()              --------->  例如abc、edf

------------------------------有重点,分割线--------------------------------

option是这样的:

<option>上海</option>,这个没有value属性,那么自然也就没有value值。

这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。

这个时候Jquery的操作是:当选中<option>上海</option>这种格式的时候,你会发现上边四个在控制台打印输出来的值是一样的。都是option中的文本。所以想要拿到option中的value的值,首先option得有value属性啊!!!

四、代码展示

下面就是HTML代码,看着可以更清楚:

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title>你随便写啦</title><scriptsrc="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript">functiondoSomething(){
console.info($("#selectedTest option:selected").text());//方法一:获取select标签选中的option中的文本。console.info($("#selectedTest").find("option:selected").text());//方法二:获取select标签选中的option中的文本。console.info($("#selectedTest option:selected").val());//方法一:获取select标签选中的option中的value的值。console.info($("#selectedTest").find("option:selected").val());//方法二:获取select标签选中的option中的value的值。document.querySelector('#selectedTest option:checked').text; // 获取select标签选中的option中的文本。document.querySelector('#selectedTest').value='北京'; // 将北京这个文本值赋值给option中的文本,通常用于回显数据操作。//------------------------------有重点,分割线--------------------------------//option是这样的:<option>上海</option>。即没有value属性的时候,自然也就没有value值。//这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。//所以当选中<option>上海</option>这个option的时候,你会发现上边四个在控制台打印输出来的值是一样的。都是option中的文本。//想要拿到option中的value的值,首先option得有value属性啊!!!      }
</script></head><body><div><selectid="selectedTest"οnchange="doSomething();"><optionvalue="abc">城市</option><optionvalue="edf">北京</option><option>上海</option></select></div></body></html>



本文首发于CSDN,为博主原创文章,如果需要转载,请注明出处,谢谢!


完结!

相关文章
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
400 1
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
861 1
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
859 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 前端开发 API
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16727 23
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
902 8
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1404 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
506 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
757 14

热门文章

最新文章