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 相关文章推荐
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
简单的网页广告特效实例
Aug 19 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
Vue 实现拨打电话操作
Nov 16 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 Memcache 中实现消息队列
2009/11/24 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
php命令行用法入门实例教程
2014/10/27 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
深入浅析JavaScript中对事件的三种监听方式
2015/09/29 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python中多线程的创建及基本调用方法
2016/07/08 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python闭包思想与用法浅析
2018/12/27 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
高中生打架检讨书1000字
2015/02/17 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书