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. 浅谈OSI七层模型及ICP/IP四层模型

    1.OSI七层模型的概念 在网络历史的早期,国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)共同出版了开放系统互联的七层参考模型. 一台计算机操作系统中的网络过程包括从应用请求(在协议栈 ...

  2. BZOJ 4276: [ONTAK2015]Bajtman i Okrągły Robin [线段树优化建边]

    4276: [ONTAK2015]Bajtman i Okrągły Robin 题意:\(n \le 5000\)个区间\(l,r\le 5000\),每个区间可以选一个点得到val[i]的价值,每 ...

  3. BZOJ 3670: [Noi2014]动物园 [KMP]

    求这玩意: 对于字符串S的前i个字符构成的子串,既是它的后缀同时又是它的前缀,并且该后缀与该前缀不重叠,将这种字符串的数量记作num[i] 对1,000,000,007取模的结果 n≤5,L≤1,00 ...

  4. transform复习之图片的旋转木马效果

    效果示意图 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content=& ...

  5. Vue打包后出现一些map文件

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始 ...

  6. Microsoft Visual Studio 中出现 Windows has triggered a breakpoint in xxx.exe的一个解决方案

    今天在用VS发布Release版本的过程中,碰到了一个问题,就是程序编译没有问题,但是在运行过程中出现了 根据经验,此类问题一般都是由于程序开发过程中的代码编写不规范导致内存写覆盖或者是使用了不同版本 ...

  7. TensorFlow实战之Softmax Regression识别手写数字

         关于本文说明,本人原博客地址位于http://blog.csdn.net/qq_37608890,本文来自笔者于2018年02月21日 23:10:04所撰写内容(http://blog.c ...

  8. SpringBoot学习之Json数据交互

    最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据展示成了一种固定的开发模式.像thymele ...

  9. void指针和const指针

    void指针:主要是便于传递不同类型的参数 const指针: const char *p :const 在* 的左边表示指向一个常量指针:表示指向的内容不可变(*p不能变,p可以改变) int a = ...

  10. mysql 修改默认字符集为utf8

    MySQL 5.5, all you need is: [mysqld] character_set_client=utf8 character_set_server=utf8 collation_s ...