JavaScript实现获取select下拉框中第一个值的方法

作者:翱翔天地 时间:2024-04-22 12:50:05 

本文实例讲述了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程序设计有所帮助。

来源:http://blog.csdn.net/you23hai45/article/details/37110171

标签:JavaScript,select下拉框
0
投稿

猜你喜欢

  • Python爬虫实例扒取2345天气预报

    2021-09-27 22:38:12
  • mysql解析json数据组获取数据组所有字段的方法实例

    2024-01-21 11:10:13
  • python爬虫增加访问量的方法

    2021-08-23 06:32:23
  • Python Django框架介绍之模板标签及模板的继承

    2021-11-05 01:36:56
  • laravel orm 关联条件查询代码

    2024-03-08 02:57:53
  • vue简单实现购物车结算功能

    2024-05-28 15:54:57
  • TensorFlow在MAC环境下的安装及环境搭建

    2023-09-14 10:32:23
  • Django 日志配置按日期滚动的方法

    2021-02-02 08:27:01
  • Python3连接Mysql8.0遇到的问题及处理步骤

    2024-01-20 13:06:46
  • 完美解决python3.7 pip升级 拒绝访问问题

    2023-08-10 07:45:33
  • go 字符串修改的操作代码

    2024-05-13 10:40:18
  • Bresenham图形算法JavaScript版本

    2010-01-25 12:09:00
  • Java timezone设置和mybatis连接数据库时区设置方式

    2024-01-24 09:43:18
  • Python3中函数参数传递方式实例详解

    2022-05-22 23:32:20
  • Mysql InnoDB多版本并发控制MVCC详解

    2024-01-23 16:46:25
  • SQL Server 2005 五个动态管理对象

    2008-12-18 14:50:00
  • 使用python从三个角度解决josephus问题的方法

    2022-02-22 02:19:55
  • Eclipse配置python默认头过程图解

    2022-03-11 10:52:59
  • 纯CSS实现导航下拉菜单

    2007-11-25 15:11:00
  • WEB页面工具语言XML带来的好处

    2008-05-29 11:01:00
  • asp之家 网络编程 m.aspxhome.com