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 相关文章推荐
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python清理子进程机制剖析
2017/11/23 Python
python 实现A*算法的示例代码
2018/08/13 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python list与NumPy array 区分详解
2019/11/06 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
活动总结报告格式
2014/05/09 职场文书
西岭雪山导游词
2015/02/06 职场文书
关于分班的感言
2015/08/04 职场文书
安全生产奖惩制度
2015/08/06 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书