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 相关文章推荐
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
javascript处理table表格的代码
Dec 06 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
浅谈开发eslint规则
Oct 01 Javascript
js实现for循环跳过undefined值示例
Jul 02 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
Python yield 小结和实例
2014/04/25 Python
python循环监控远程端口的方法
2015/03/14 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python set内置函数的具体使用
2019/07/02 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
企划专员岗位职责
2013/12/09 职场文书
大学自荐信
2013/12/12 职场文书
《童趣》教学反思
2014/02/19 职场文书
怎样填写就业意向
2014/04/02 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
捐款感谢信
2015/01/20 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
css3新特性的应用示例分析
2022/03/16 HTML / CSS
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL