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 相关文章推荐
JS截取url中问号后面参数的值信息
Apr 29 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
Node.js插件安装图文教程
May 06 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php制作动态随机验证码
2015/02/12 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
使用TensorFlow实现SVM
2018/09/06 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
家居设计专业个人自荐信范文
2013/11/26 职场文书
关于元旦的广播稿
2014/02/16 职场文书
销售队伍口号
2014/06/11 职场文书
民主评议党员个人总结
2015/02/13 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android