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

您所在的位置:网站首页 select标签获取选中的值 用jquery或js获取select标签中选中的option值及文本

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

2024-02-24 15:21| 来源: 网络整理| 查看: 265

用jquery或js获取select标签中选中的option值及文本 原创

No8g攻城狮 2023-05-24 19:53:00 博主文章分类:前端相关 ©著作权

文章标签 select option jquery select标签 bc 文章分类 代码人生

©著作权归作者所有:来自51CTO博客作者No8g攻城狮的原创作品,请联系作者获取转载授权,否则将追究法律责任

本文目录

一、示例

二、获取option的文本

三、获取option中value的值

四、代码展示

一、示例 北京 上海 上海 二、获取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是这样的:

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

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

这个时候Jquery的操作是:当选中上海这种格式的时候,你会发现上边四个在控制台打印输出来的值是

一样的。都是option中的文本。所以想要拿到option中的value的值,首先option得有value属性啊!!!

四、代码展示

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

你随便写啦 function doSomething(){ 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是这样的:上海。即没有value属性的时候,自然也就没有value值。 //这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。 //所以当选中上海这个option的时候,你会发现上边四个在控制台打印输出来的值是一样的。都是option中的文本。 //想要拿到option中的value的值,首先option得有value属性啊!!! } 城市 北京 上海

 

 

 

完结!

收藏 评论 分享 举报

上一篇:new Date().getTime()和System.currentTimeMillis()获取时间戳的比较

下一篇:【前端异常】html页面中的button按钮会自动提交form表单的问题以及解决方案



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3