js获取下拉列表框<option>中的value和text的值示例代码

 更新时间:2014年01月11日 09:52:34   作者:  
本篇文章主要是对js获取下拉列表框<option>中的value和text的值示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

在编程过程中,我们对下拉列表框的取值很多时候都是获取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>

相关文章

  • js实现盒子滚动动画效果

    js实现盒子滚动动画效果

    这篇文章主要为大家详细介绍了js实现盒子滚动动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 微信小程序实现瀑布流布局与无限加载的方法详解

    微信小程序实现瀑布流布局与无限加载的方法详解

    瀑布流布局是我们日常开发中经常见到的一种页面布局方式,下面这篇文章主要给大家介绍了微信小程序实现瀑布流布局与无限加载的相关资料,文中给出了详细介绍和示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-05-05
  • javascript函数的节流[throttle]与防抖[debounce]

    javascript函数的节流[throttle]与防抖[debounce]

    这篇文章主要介绍了javascript函数的节流[throttle]与防抖[debounce ],详细的介绍了节流与防抖的原理和示例,具有一定的参考价值,有兴趣的可以了解一下
    2017-11-11
  • uniapp中canvas绘制图片内容空白报错的原因及解决

    uniapp中canvas绘制图片内容空白报错的原因及解决

    最近有个需求就是要用canvas画个分享的海报,所以这里总结下,这篇文章主要给大家介绍了关于uniapp中canvas绘制图片内容空白报错的原因及解决方法,需要的朋友可以参考下
    2023-09-09
  • 信息滚动效果的实例讲解

    信息滚动效果的实例讲解

    下面小编就为大家带来一篇信息滚动效果的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js表单序列化判断空值的实例

    js表单序列化判断空值的实例

    下面小编就为大家带来一篇js表单序列化判断空值的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 设置点击文本框或图片弹出日历控件的实现代码

    设置点击文本框或图片弹出日历控件的实现代码

    下面小编就为大家带来一篇设置点击文本框或图片弹出日历控件的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • javascript实现禁止复制网页内容汇总

    javascript实现禁止复制网页内容汇总

    本文给大家汇总介绍了几种使用javascript和CSS实现禁止复制页面内容的方法,非常的实用,有需要的小伙伴可以参考下。
    2015-12-12
  • flexslider.js实现移动端轮播

    flexslider.js实现移动端轮播

    本文主要分享了flexslider.js实现移动端轮播的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript的for循环中嵌套一个点击事件的问题解决

    JavaScript的for循环中嵌套一个点击事件的问题解决

    本文主要介绍了JavaScript的for循环中嵌套一个点击事件点击一次弹出多个相同的值的解决方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论