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 相关文章推荐
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
jquery实现手风琴案例
May 04 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
SMARTY学习手记
2007/01/04 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
浅谈Javascript事件模拟
2012/06/27 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
原生js实现日期联动
2015/01/12 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python程序如何进行保存
2020/07/03 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
营销主管自我评价怎么写
2013/09/19 职场文书
采购内勤岗位职责
2013/12/10 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle