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 相关文章推荐
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
javascript如何创建对象
Aug 29 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
两个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的Yii框架中View视图的使用进阶
2016/03/29 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
学习Node.js模块机制
2016/10/17 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python 通配符删除文件的实例
2018/04/24 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
linux面试题参考答案(10)
2016/10/26 面试题
七一表彰活动方案
2014/01/18 职场文书
大学校园活动策划书
2014/02/04 职场文书
决心书标准格式
2014/03/11 职场文书
读书小明星事迹材料
2014/05/03 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
婚前协议书标准版
2014/10/19 职场文书
蓬莱阁导游词
2015/02/04 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
Python开发简易五子棋小游戏
2022/05/02 Python