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面向对象编程
Nov 15 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
js实现返回顶部效果
2017/03/10 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
django admin组件使用方法详解
2019/07/19 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
战友聚会邀请函
2014/01/18 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
商务经理岗位职责
2014/07/30 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
三方协议书
2015/01/27 职场文书
大雁塔英文导游词
2015/02/10 职场文书
安全教育培训制度
2015/08/06 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技