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对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
express框架下使用session的方法
Jul 31 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
两个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乱码问题
2012/03/25 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
Express.JS使用详解
2014/07/17 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python正则捕获操作示例
2017/08/19 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Shell编程面试题
2012/05/30 面试题
应用心理学个人的求职信
2013/12/08 职场文书
新领导上任欢迎词
2014/01/13 职场文书
新年寄语大全
2014/04/12 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
python实现自动化群控的步骤
2021/04/11 Python
MySQL 视图(View)原理解析
2021/05/19 MySQL
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫