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与iframe的那些事儿
Jul 04 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
Aug 26 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python pandas库中的isnull()详解
2019/12/26 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
详解Python 中的容器 collections
2020/08/17 Python
python如何实现图片压缩
2020/09/11 Python
python从PDF中提取数据的示例
2020/10/30 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
物业总经理岗位职责
2014/02/28 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
结婚老公保证书
2015/02/26 职场文书
小学美术教学反思
2016/02/17 职场文书
个人向公司借款协议书
2016/03/19 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
基于flask实现五子棋小游戏
2021/05/25 Python
Redis可视化客户端小结
2021/06/10 Redis