如何使用jQuery在下拉列表中选择第一个元素

给出一个包含选项元素的下拉列表，任务是用JQuery获得选择元素的第一个元素。
步骤 1:

使用JQuery选择器选择<select>元素的第一个元素。
使用.prop()属性来获得对该特定元素的属性的访问。
将selectedIndex属性改为0以获得对第一个元素的访问。(索引以0开始)

例子：这个例子说明了上面讨论的方法。

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to select first element in the
        drop-down list using jQuery ? 
    </title>
      
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksforGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
    </p>
  
      
    <select id = "select"> 
        <option value="GFG1">GFG1</option>
        <option value="GFG2">GFG2</option>
        <option value="GFG3">GFG3</option>
        <option value="GFG4">GFG4</option>
        <option value="GFG5">GFG5</option>
     
      
    <br><br>
      
    <button onclick = "gfg_Run()"> 
        Click here
    
      
    <p id = "GFG_DOWN" style =
        "font-size: 23px; font-weight: bold; color: green; ">
    </p>
  
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to get the "
                    + "first option's value using JQuery"; 
          
        function gfg_Run() {
            el_down.innerHTML = 
                $("#select").prop("selectedIndex", 0).val();
        }         
    </script> 
</body> 
  
</html>

输出:

在点击按钮之前。

如何使用jQuery在下拉列表中选择第一个元素？

点击该按钮后。

如何使用jQuery在下拉列表中选择第一个元素？

步骤 2:

这个选择器更加具体，使用option:nth-child(1)选择第一个元素。
这将获得对第一个元素的访问（索引以1开始）。

例子：这个例子说明了上面讨论的方法。

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        How to select first element in the
        drop-down list using jQuery ? 
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head> 
  
<body style = "text-align:center;"> 
      
    <h1 style = "color:green;" > 
        GeeksforGeeks 
    </h1>
      
    <p id = "GFG_UP" style = 
        "font-size: 15px; font-weight: bold;">
    </p>
  
      
    <select id = "select"> 
        <option value="GFG1">GFG1</option>
        <option value="GFG2">GFG2</option>
        <option value="GFG3">GFG3</option>
        <option value="GFG4">GFG4</option>
        <option value="GFG5">GFG5</option>
     
      
    <br><br>
      
    <button onclick = "gfg_Run()"> 
        Click here
    
      
    <p id = "GFG_DOWN" style = 
        "font-size: 23px; font-weight: bold; color: green; ">
    </p>
  
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
          
        el_up.innerHTML = "Click on the button to get the"
                + " first option's value using JQuery"; 
          
        function gfg_Run() {
            el_down.innerHTML = 
                $('#select option:nth-child(1)').val();
        }         
    </script> 
</body> 
  
</html>