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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
js点击选择文本的方法
Feb 09 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php中explode与split的区别介绍
2012/10/03 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php中异常处理方法小结
2015/01/09 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
医院护士求职自荐信格式
2013/09/21 职场文书
机械专业求职信范文
2014/07/15 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书