JS获取select的value和text值的简单实例

 更新时间:2014年02月26日 10:04:02   作者:  
本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
复制代码 代码如下:

<select id = "cityList" >  
<select id = "selectId" >  
   <option value = "0">第0个</option>  
</select>  

<script>  
    var selectObj = document.getElementById('selectId');  
    // 通过对象添加option  
    selectId.add(new Option("第一个","1"))  
    selectId.add(new Option("第二个","2"))  
    // 通过id添加option  
    selectId.add(new Option("第三个","3"))  
    selectId.add(new Option("第四个","4"))  
    // 通过id添加方法(也可以通过对象添加方法)  
    selectId.onchange = function(){  
        // 通过对象获取value和text  
        alert(selectObj.value);  
        alert(selectObj.options[selectObj.selectedIndex].text);  
        // 通过 id 获取value和text  
        alert(selectId.value);  
        alert(selectId.options[selectId.selectedIndex].text);  
        // 还可以通过this获取value和text  
        alert(this.value);  
        alert(this.options[this.selectedIndex].text);  
    };  
</script> 

相关文章

  • 微信小程序用canvas实现圆形进度条

    微信小程序用canvas实现圆形进度条

    这篇文章主要为大家详细介绍了微信小程序用canvas实现圆形进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JS生态系统加速eslint解析器使用实例探索

    JS生态系统加速eslint解析器使用实例探索

    这篇文章主要为大家介绍了JS生态系统加速之eslint解析器使用实例探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • js页面引导页的实现思路总结

    js页面引导页的实现思路总结

    在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,本文主要介绍了js页面引导页的实现思路总结,感兴趣的可以了解一下
    2023-04-04
  • 浅述节点的创建及常见功能的实现

    浅述节点的创建及常见功能的实现

    本文主要对节点的创建及常见功能的实现方法进行介绍,希望会对大家学习javascript有所帮助,下面就跟小编一起来看下吧
    2016-12-12
  • BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    BootStrap智能表单实战系列(六)表单编辑页面的数据绑定

    这篇文章主要介绍了BootStrap智能表单实战系列(六)表单编辑页面的数据绑定的相关资料,一般用于编辑页面,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • Javascript 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用)

    这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
    2015-06-06
  • uniapp中修改打包路径的实现步骤

    uniapp中修改打包路径的实现步骤

    本文主要介绍了uniapp中修改打包路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-02-02
  • js放大镜放大购物图片效果

    js放大镜放大购物图片效果

    这篇文章主要为大家详细介绍了基于JavaScript实现放大镜放大购物图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • javascript数组去重的六种方法汇总

    javascript数组去重的六种方法汇总

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法,有各人总结也有网上热心网友的方法,这里简单地总结一下。
    2015-08-08
  • uniapp小程序底部tabbar图标大小设置办法

    uniapp小程序底部tabbar图标大小设置办法

    这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下
    2023-08-08

最新评论