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）选中第一项

（2）选中第二项

JavaScript获取select下拉框中的第一个值的更多相关文章

  1. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  2. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  3. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  4. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  5. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  6. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

  7. 如何获取select下拉框中option选中的文本值

    $(select的id或者class).change(function(){ $(this).find("option:selected").text() }) 源文:https: ...

  8. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  9. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

随机推荐

  1. Cypher查询语言--Neo4j 之高级篇 (六)

    目录 排序Order by 通过节点属性排序节点 通过多节点属性排序节点 倒序排列节点 空值排序 Skip 跳过前三个 返回中间两个 Limit 返回第一部分 函数Functions 判断 All A ...

  2. FluorineFx.IO.AMFMessage

    近日玩网页游戏七雄争霸,觉得还可以,但是玩起来太累,所以想自己开发个辅助试试 从网上找到了个<流年网页游戏辅助VIP系列教程>,看了下,遇到了一个问题 特来请高手指点...... 代码如下 ...

  3. Using Custom Domains With IIS Express In Asp.Net Core

    IIS Express是一个Mini版的IIS,能够支持所有的Web开发任务,但是这种设计有一些缺陷,例如只能通过localhost:<port>的方式来访问我们的应用程序,看起来就有点不 ...

  4. Redis进阶实践之十 Redis哨兵集群模式

    一.引言             上一篇文章我们详细的讲解了Redis的主从集群模式,其实这个集群模式配置很简单,只需要在Slave的节点上进行配置,Master主节点的配置不需要做任何更改,但是有一 ...

  5. php与web页面交互

    一.web表单 web表单的功能是让浏览者和网站有一个互动的平台.web表单主要用来在网页中发送数据到服务器. 1.1 表单的创建 使用form标记,并在其中插入相关的表单元素,即可创建一个表单. & ...

  6. （二）异步方法BeginInvoke和EndInvoke

    .Net framework可以让你异步调用任何方法,你可以定义一个与你要调用的方法的签名相同的委托.公共语言运行时将自动为该委托定义与签名相同的BeginInvok和EndInvoke方法. Beg ...

  7. dig挖出DNS的秘密

    [最简单的dig用法] 最简单的dig用法,当然就是直接输入dig按回车. 1 2 3 4 5 6 $ dig   ; <<>> DiG 9.8.2rc1-RedHat-9.8 ...

  8. 批处理文件：windows下关闭指定端口

    @echo offsetlocal enabledelayedexpansionset /p port=please input port number:for /f "tokens=1-5 ...

  9. Sphinx下载、安装、配置、Hello World、文档阅读

    sphinx下载.安装.配置.Hello World.查看文档

  10. Https访问

    Let's Encrypt是很火的一个免费SSL证书发行项目,自动化发行证书,证书有90天的有效期.适合个人使用或者临时使用,不用再忍受自签发证书不受浏览器信赖的提示.去年VPS侦探曾经说过Let's ...