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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 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 数字左侧自动补0
2008/03/31 PHP
sae使用smarty模板的方法
2013/12/17 PHP
php递归json类实例
2014/12/02 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js调用css属性写法
2013/09/21 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
React Native之TextInput组件解析示例
2017/08/22 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python中生成ndarray实例讲解
2021/02/22 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
面向对象编程OOP的优点
2013/01/22 面试题
介绍一下gcc特性
2012/01/20 面试题
安全资金保障制度
2014/01/23 职场文书
红旗方阵解说词
2014/02/12 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android