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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
微信小程序 select 下拉框组件功能
Sep 09 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
Web程序工作原理详解
2014/12/25 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python中私有属性的定义方式
2020/03/05 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
会议活动邀请函
2014/01/27 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
感恩父母主题班会
2015/08/12 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers