SelecT下拉框选中和取值的解决方法


Posted in Javascript onNovember 22, 2016

 Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。

这个很好解决:

如下:

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option>男装</option>
<option>女装</option>
<option>童装</option>
<option已通过审核商家</option>
</select>
</div>
</div>

JS:

function selectOnchang(obj){ 
//获取被选中的option标签选项 
alert(obj.selectedIndex);
}

这里利用的就是onchange和selectedIndex。

onchange 事件会在域的内容改变时发生。

onchange 事件也可用于单选框与复选框改变后触发的事件。

selectedIndex: 设置或返回下拉列表中被选项目的索引号。

这样,在我们改变选项时就会触发改事件。
这样做,我们只能获得选中哪项,而如果我们选中哪项,需要传递特殊的信息,这个时候该怎么办呢。

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option value="men">男装</option>
<option value="wemen">女装</option>
<option value="childe">童装</option>
<option value="yunfu">孕妇装</option>
</select>
</div>
</div>

也就是说,我在选中的同时,想获得那个value值,这个时候怎么做。

这里只用一种方法实现,其他的方法应该还有很多。

function selectOnchang(obj){ 
var value = obj.options[obj.selectedIndex].value;
alert(value);
}

以上所述是小编给大家介绍的SelecT下拉框选中和取值的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
javascript入门之window对象【新手必看】
Nov 22 #Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 #Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 #Javascript
AngularJS实现ajax请求的方法
Nov 22 #Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 #Javascript
js字符串操作总结(必看篇)
Nov 22 #Javascript
You might like
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
PHP7变量处理机制修改
2021/03/09 PHP
5 cool javascript apps
2007/03/24 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
python实现简单中文词频统计示例
2017/11/08 Python
python实现飞机大战
2018/09/11 Python
python是否适合网页编程详解
2019/10/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
Django权限设置及验证方式
2020/05/13 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
教师对学生的寄语
2014/04/03 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书