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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
Smarty环境配置与使用入门教程
2016/05/11 PHP
php中使用websocket详解
2016/09/23 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现画一颗树和一片森林
2018/06/25 Python
python使用for循环计算0-100的整数的和方法
2019/02/01 Python
python面向对象法实现图书管理系统
2019/04/19 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python守护进程实现过程详解
2020/02/10 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
性能服装:HYLETE
2018/08/14 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
职业生涯规划书范文
2014/03/10 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
python如何读取.mtx文件
2021/04/22 Python
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python