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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
小程序实现按下录音松开识别语音
2019/11/22 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
Python读写unicode文件的方法
2015/07/10 Python
深入浅析Python字符编码
2015/11/12 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
3种python调用其他脚本的方法
2020/01/06 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
节约能源标语
2014/06/17 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
简历自我评价模板
2015/03/11 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android