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

本文实例讲述了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）选中第二项

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表单(form)操作技巧总结》、《jQuery窗口操作技巧总结》、《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • js实现Select下拉框具有输入功能的方法
  • JS操作select下拉框动态变动(创建/删除/获取)
  • JavaScript实现将数组数据添加到Select下拉框的方法
  • Javascript select下拉框操作常用方法
  • JS Select下拉框(支持输入模糊查询)
  • javascript中select下拉框的用法总结
  • JavaScript实现向select下拉框中添加和删除元素的方法
  • JavaScript实现两个select下拉框选项左移右移
  • js实现可输入可选择的select下拉框
  • jquery及原生js获取select下拉框选中的值示例
赞 (0)

相关推荐

  • js实现可输入可选择的select下拉框

    js实现可输入可选择的select下拉框

    本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="

  • JS Select下拉框(支持输入模糊查询)

    本文实例为大家分享了支持输入模糊查询的Select下拉框,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <Script Language="Javascript"> f

  • javascript中select下拉框的用法总结

    javascript中select下拉框的用法总结

    本文针对开发项目中遇到的问题,进行了汇总 问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="

  • jquery及原生js获取select下拉框选中的值示例

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

  • Javascript select下拉框操作常用方法

    复制代码 代码如下: function AddDropDownList(id,fatherCtl) { if(!document.getElementById(id)) { var ddl = document.createElement('select'); ddl.setAttribute("id",id); if(fatherCtl&&document.getElementById(fatherCtl)) document.getElementById(fathe

  • js实现Select下拉框具有输入功能的方法

    本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="

  • JavaScript实现两个select下拉框选项左移右移

    今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序,刚刚才开始学javascript还有很多优化的地方. Javascript代码 <script type="text/javascript"> /**选中的元素向右移动**/ function moveRight() { //得到第一个select对象 var selectElement = document.getElementById("first"); var optionE

  • JavaScript实现将数组数据添加到Select下拉框的方法

    JavaScript实现将数组数据添加到Select下拉框的方法

    本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

  • JS操作select下拉框动态变动(创建/删除/获取)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement_x("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docu

  • JavaScript实现向select下拉框中添加和删除元素的方法

    JavaScript实现向select下拉框中添加和删除元素的方法

    本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法.分享给大家供大家参考,具体如下: 1.说明 a. 利用append()方法向下拉框中添加元素 b. 利用remove()方法移除下拉框中最后一个元素 2.实例源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

随机推荐