JavaScript实现获取select下拉框中第一个值的方法


Posted in Javascript onFebruary 06, 2018

本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法。分享给大家供大家参考,具体如下:

1、说明

获取select下拉框中的第一个值

2、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript获取select下拉框中的第一个值</title>
<script type="text/javascript">
   /**
   * JavaScript获取select下拉框中的第一个值
   */
   function getFirstValOfSelect()
   {
     //获取select中的ID
     var selectId = document.getElementById("select_option");
     //获取select下拉框中第一个值
     var selectValue = selectId.options[0].value;
     //获取select下拉框中第一个文本值
     var selectText = selectId.options[0].text;
     //打印select下拉框中第一个值和文本值
     alert("值:" + selectValue + "\n" + "文本值:" + selectText);
   }
</script>
</head>
<body>
  <div id="div_select">
    <select id="select_option">
      <option value="0">桃树</option>
      <option value="1">梨树</option>
      <option value="2">樟树</option>
      <option value="3">枫树</option>
      <option value="4">松树</option>
      <option value="5">梧桐树</option>
      <option value="6">槐树</option>
    </select>
  </div>
  <input type="button" value="JavaScript获取select下拉框中的第一个值" onclick="getFirstValOfSelect()"/>
</body>
</html>

3、实现结果

(1)选中第一项

JavaScript实现获取select下拉框中第一个值的方法

(2)选中第二项

JavaScript实现获取select下拉框中第一个值的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
Vue组件生命周期运行原理解析
Nov 25 Vue.js
JavaScript中isPrototypeOf函数
Nov 07 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 #Javascript
详解使用React进行组件库开发
Feb 06 #Javascript
fullpage.js最后一屏滚动方式
Feb 06 #Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 #Javascript
微信小程序使用Promise简化回调
Feb 06 #Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 #Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php中设置index.php文件为只读的方法
2013/02/06 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
深入分析python 排序
2020/08/24 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
TCP/IP的分层模型
2013/10/27 面试题
几道Java和数据库的面试题
2013/05/30 面试题
2013的个人自我评价
2013/12/26 职场文书
六查六看自查材料
2014/02/17 职场文书
一年级学生期末评语
2014/04/21 职场文书
农业生产宣传标语
2014/10/08 职场文书
个人党性锻炼总结
2015/03/05 职场文书
廉政党课工作报告案例
2019/06/21 职场文书