Rumah > hujung hadapan web > tutorial js > JS获取select下拉框中第一顺位元素内的值

JS获取select下拉框中第一顺位元素内的值

php中世界最好的语言
Lepaskan: 2018-03-23 16:54:46
asal
2019 orang telah melayarinya

这次给大家带来JS获取select下拉框中第一顺位元素内的值,JS获取select下拉框中第一顺位元素内值的注意事项有哪些,下面就是实战案例,一起来看一下。

本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法。分享给大家供大家参考,具体如下:

1、说明

获取select下拉框中的第一个值

2、实现源码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!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>

Salin selepas log masuk

3、实现结果

(1)选中第一项

(2)选中第二项

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Singleton封装增删改查

js的作用域与预解析使用详解

Atas ialah kandungan terperinci JS获取select下拉框中第一顺位元素内的值. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan