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

如何使用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>

输出:

  • 在点击按钮之前。

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

  • 点击该按钮后。

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

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例,从基础开始学习jQuery。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程