Home >Web Front-end >JS Tutorial >How to get the first value in the select drop-down box with JavaScript

How to get the first value in the select drop-down box with JavaScript

小云云Original: 2018-02-06 14:26:492948browse

This article mainly introduces to you the method of obtaining the first value in the select drop-down box using JavaScript, and involves the related operation techniques of obtaining the attributes of page elements in JavaScript. Friends who need it can refer to it. I hope it can help you.

1. Description

Get the first value in the select drop-down box

2. Implementation source code

<!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>
  <p id="p_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>
  </p>
  <input type="button" value="JavaScript获取select下拉框中的第一个值" onclick="getFirstValOfSelect()"/>
</body>
</html>

3. Realization result

(1) Select the first item

# #(2) Select the second item

Related recommendations:

jQuery form element selector and get select element selector instance

Detailed explanation of the js method of getting the select tag value

jQuery method of getting the select element selector

The above is the detailed content of How to get the first value in the select drop-down box with JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Bootstrap implementation of table merging cells exampleNext article：Bootstrap implementation of table merging cells example

See more

How to get the first value in the select drop-down box with JavaScript

Related articles