Home  >  Article  >  Web Front-end  >  JS gets the value in the first element in the select drop-down box

JS gets the value in the first element in the select drop-down box

php中世界最好的语言
php中世界最好的语言Original
2018-03-23 16:54:461856browse

This time I will bring you JS to get the value in the first element in the select drop-down box, and JS to get the value in the first element in the select drop-down box. What are the things to note? are as follows. This is a practical case, let’s take a look at it.

The example of this article describes the method of JavaScript to obtain the first value in the select drop-down box. Share it with everyone for your reference, the details are as follows:

1. Description

Get the first value in the select drop-down box

2. Implement the 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. Implement the result

(1) Select the first item

(2) Select the second item

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Singleton encapsulation addition, deletion and modification check

Detailed explanation of the scope and pre-parsing of js

The above is the detailed content of JS gets the value in the first element in the select drop-down box. 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