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打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
JavaScript严格模式详解
Jan 16 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
详解vue v-model
Aug 31 Javascript
vue.js watch经常失效的场景与解决方案
Jan 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
咖啡的植物学知识
2021/03/03 咖啡文化
PHP中file_get_contents高?用法实例
2014/09/24 PHP
smarty简单应用实例
2015/11/03 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js格式化时间小结
2014/11/03 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
js代码实现轮播图
2020/05/04 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
python实现的防DDoS脚本
2011/02/08 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
HTML的form表单和django的form表单
2019/07/25 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python实现把类当做字典来访问
2019/12/16 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
出生证明公证书
2014/04/09 职场文书
环保倡议书范文
2014/05/12 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
人与自然观后感
2015/06/16 职场文书
解除合同协议书范本
2016/03/21 职场文书