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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
详解React 元素渲染
Jul 07 Javascript
两个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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
HTML上传控件取消选择
2013/03/06 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
jQuery操作css样式
2017/05/15 jQuery
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python3 线性回归验证方法
2019/07/09 Python
Python占用的内存优化教程
2019/07/28 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python datetime包函数简单介绍
2019/08/28 Python
python+django+rest框架配置创建方法
2019/08/31 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
网吧最新创业计划书范文
2014/03/27 职场文书
国际商务专业求职信
2014/07/15 职场文书
街道务虚会发言材料
2014/10/20 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
介绍一下28个JS常用数组方法
2022/05/06 Javascript