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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 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中对xml读取的相关函数的介绍一
2008/06/05 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP引用的调用方法分析
2016/04/25 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
Python数据结构之翻转链表
2017/02/25 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
python线程信号量semaphore使用解析
2019/11/30 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
python能自学吗
2020/06/18 Python
Python中bisect的用法及示例详解
2020/07/20 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
留学自荐信
2013/10/10 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Redis实战高并发之扣减库存项目
2022/04/14 Redis