如果用JavaScript获取标准下拉框的"选中值"和"选中文本"

简介: 在html中标准下拉框很常用,经常有这样的需求在下拉框改变的时候我们需要获取它的文本或值。 初学JS的朋友经常会把它的值和文本搞错,把两者混为一谈。 有的时候还会歪打正着,因为经常我们的值就是我们的文本,但是实际它们是不同的东西。

在html中标准下拉框很常用,经常有这样的需求在下拉框改变的时候我们需要获取它的文本或值。

初学JS的朋友经常会把它的值和文本搞错,把两者混为一谈。

有的时候还会歪打正着,因为经常我们的值就是我们的文本,但是实际它们是不同的东西。

下面我们来举个例子。

我们先建立一个下拉框,如下:

< select  name ="selOp"  id ="selOp"  onchange ="GetSelValue();" >
    
< option  selected value ="a" > a1 </ option >
    
< option  value ="b"   > b2 </ option >
    
< option  value ="c"   > c3 </ option >
    
< option  value ="d"   > d4 </ option >
    
< option  value ="e"   > e5 </ option >
</ select >

 

JS代码如下:

img_405b18b4b6584ae338e0f6ecaf736533.gif img_1c53668bcee393edac0d7b3b3daff1ae.gif function  GetSelValue()  {
        
var objSel = document.getElementById("selOp");
        
        
//这是获取值
        alert("当前值: " + objSel.value);
        
        
//这是获取文本
        alert("当前文本: " + objSel.options(objSel.selectedIndex).text);
}

 

目录
相关文章
|
5月前
|
JavaScript 前端开发 Java
java调用js实现富文本过滤
java调用js实现富文本过滤
|
15天前
|
JavaScript
js 特殊文本的判断
js 特殊文本的判断
33 0
|
3月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
3月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
77 1
|
3月前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
|
3月前
|
资源调度 前端开发
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
文本,vitepress的使用,如何使用vitevitepress没有config.js该怎么办?这里使用vitepress进行手动配置,参考只爭朝夕不負韶華的文章
|
4月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
64 0
|
5月前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本
|
4月前
|
JavaScript 前端开发
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
JavaScript 计算颜色的相对亮度,并确定相应的文本颜色
55 0