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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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
轻松修复Discuz!数据库
2008/05/03 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python 多进程、多线程效率对比
2020/11/19 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
2014年保卫科工作总结
2014/12/05 职场文书
信用卡工资证明范本
2015/06/19 职场文书
学校标语口号大全
2015/12/26 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers