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 相关文章推荐
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
详解jQuery选择器
Dec 21 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
深入理解vue Render函数
2017/07/19 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
《可爱的动物》教学反思
2014/02/22 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
维稳承诺书
2015/01/20 职场文书