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 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript 文件的同步加载与异步加载实现原理
Dec 13 Javascript
javascript折半查找详解
Jan 26 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JavaScript 函数的执行过程
May 09 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue实现选中效果
Oct 07 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
python+opencv实现动态物体追踪
2018/01/09 Python
对pandas中Series的map函数详解
2018/07/25 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Django REST framework视图的用法
2019/01/16 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
校园之星获奖感言
2014/01/29 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
作风整顿剖析材料
2014/09/30 职场文书
业务员岗位职责范本
2015/04/03 职场文书
导游词之江南周庄
2019/12/06 职场文书
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技