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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
用JavaScript调用WebService的示例
Apr 07 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
浅谈vue 锚点指令v-anchor的使用
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
PHP 数据库树的遍历方法
2009/02/06 PHP
php error_log 函数的使用
2009/04/13 PHP
php 图片上传类代码
2009/07/17 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP连接access数据库
2015/03/27 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
javascript折半查找详解
2015/01/26 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
关于python的list相关知识(推荐)
2017/08/30 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
如何基于python实现归一化处理
2020/01/20 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Shell如何接收变量输入
2012/09/24 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
合同专员岗位职责
2013/12/18 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
公司周年庆活动方案
2014/08/25 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书