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 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python正则分析nginx的访问日志
2017/01/17 Python
python实现证件照换底功能
2019/08/20 Python
Numpy的简单用法小结
2019/08/28 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
全球度假村:Club Med
2017/11/27 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
往来会计岗位职责
2013/12/19 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
XX部保密工作制度范本
2019/08/27 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS