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 相关文章推荐
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
Javascript中对象继承的实现小例
May 12 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
后进生转化工作制度
2014/01/17 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
行政部岗位职责范本
2014/03/13 职场文书
学校重阳节活动总结
2015/03/24 职场文书