js获取下拉列表框中的value和text的值示例代码


Posted in Javascript onJanuary 11, 2014

在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得<option value="value">ShowText</option>中"ShowText",我们该如何获取呢?方法很简单,具体代码如下:

<script type="text/javascript">
function a(object){
alert(object);
}
</script>
<!-- 获取显示的值 -->
<select onchange="a(this.options[this.selectedIndex].innerText);">
<option value="value-a">text-a</option>
<option value="value-b">text-b</option>
</select>
<!-- 获取value的值 -->
<select onchange="a(this.options[this.selectedIndex].value);">
<option value="value-c">text-c</option>
<option value="value-d">text-d</option>
</select>
function isSelect(selectPress) {
            //var select = document.getElementById("mySelect").ind;
            var selectValue = selectPress.options[selectPress.selectedIndex].value; //显示value 下标0、1、2
            var selectValue2 = selectPress.options[selectPress.selectedIndex].innerText; //显示显示的值 具体内容(上海、北京)
            //alert(selectValue);
            //alert(selectValue2);
            if (selectValue == "-1") {
                alert("请选择城市,表单提交被拒绝!")
                return;
            }
            else {
                document.getElementById('form1').submit(); //form表单提交
            }
        } 
<select onchange="isSelect(this);" id="mySelect">
        <option value="-1">--请选择--</option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">武汉</option>
</select>
Javascript 相关文章推荐
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
两个select多选模式的选项相互移动(示例代码)
Jan 11 #Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 #Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 #Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 #Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 #Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 #Javascript
javascript遍历控件实例详细解析
Jan 10 #Javascript
You might like
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php格式化电话号码的方法
2015/04/24 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
js控制框架刷新
2008/08/01 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
如何利用Fabric自动化你的任务
2016/10/20 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python画微信表情符的实例代码
2019/10/09 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Pycharm中如何关掉python console
2020/10/27 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
80年代复古T恤:TruffleShuffle
2018/07/02 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
北承题目(C++)
2012/05/16 面试题
商场消防演习方案
2014/02/12 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
组织鉴定材料
2014/06/02 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
创业计划书之网吧
2019/10/10 职场文书
Python django中如何使用restful框架
2021/06/23 Python
Redis三种集群模式详解
2021/10/05 Redis
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js