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 日期处理之时区问题
Oct 08 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
JavaScript作用域链示例分享
May 27 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
JavaScript实现网页留言板功能
Nov 23 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通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
js实现批量删除功能
2020/08/27 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python 字典与字符串的互转实例
2017/01/13 Python
代码分析Python地图坐标转换
2018/02/08 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
pip命令无法使用的解决方法
2018/06/12 Python
python字典的遍历3种方法详解
2019/08/10 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python绘制热力图示例
2019/09/27 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
什么是Python包的循环导入
2020/09/08 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
料理师求职信
2014/01/30 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL