如何清除以前在 JavaScript 中更改下拉菜单时附加的数据？

要清除先前附加的更改数据，下拉列表是通过使用 jQuery 执行的。附加数据必须在更改或切换下拉菜单时清除，否则先前附加的数据将与当前菜单项数据一起附加。为了避免这个问题，jQuery 或 JavaScript 是在add()、remove()、addClass()和removeClass() 方法的帮助下实现的。

以下方法将清楚地说明：

方法一：首先使用removeClass()方法移除之前附加的数据菜单项的活动类。然后通过addClass()方法添加当前附加数据菜单项的活动类。现在使用each()函数添加与点击时添加或删除的活动类相关的数据。

• 示例：下面的警报选择示例说明如何使用remove()、add() 方法清除先前附加的更改下拉列表的数据。

    
  
      
      
      
      
      
      
      
      
      
  
    
  
      
          
            GeeksforGeeks
          
    
          
              
                  Alert Menu
              
              
                  Success
                  Warning
                  Danger
              
          
          
              ×
               Alert ! ...
      
      
          $("a").click(function() {
    
              // removeClass active of previously selected menu item
              $('a.dropdown-item.active').removeClass("active");
    
              // Add class active to current selected menu item
              $(this).addClass("active");
    
              // Getting text from within selected elements
              var msg = $('a.dropdown-item.active').text();
    
              // If condition to check selected alert message
              if (msg == "Success") {
                  $("#alert").removeClass("alert-warning");
                  $("#alert").removeClass("alert-danger");
                  $("#alert").addClass("alert-success");
              } else if (msg == "Warning") {
                  $("#alert").removeClass("alert-success");
                  $("#alert").removeClass("alert-danger");
                  $("#alert").addClass("alert-warning");
              } else {
                  $("#alert").removeClass("alert-success");
                  $("#alert").removeClass("alert-warning");
                  $("#alert").addClass("alert-danger");
              }
              var str = "";
              $(".active").each(function() {
    
                  // Using html() to append html data
                  str += $(this).html() + " ";
              });
              $("#demo").html(str);
          }).click();
      
  
    

• 输出：
  

方法 2：最初使用 for 循环删除先前附加的数据菜单项的活动类，这里循环条件基于列出的项的长度，并借助remove()方法。然后通过add()方法添加列出的当前附加数据菜单项的活动类。现在使用each()函数附加有关在切换列出的项目时添加或删除的活动类的数据。

• 示例：下面的活动课程选择示例说明如何使用 addClass()、removeClass() 方法清除先前附加的数据更改下拉列表。

    
  
      
      
      
      
      
      
      
      
      
  
    
  
      
          
            GeeksforGeeks
          
    
          
              
                  Active Courses Menu
              
              
                  
                   JAVA Backend Development 
                  
                  
                   DSA Foundation
                  
                  
                   GEEK Class
                  
                  
                   Machine Learning Foundation With Python & AI
                  
                  
                   Competitive Programming
                  
              
          
    
          
              
                  Selected Courses
              
                  
              
              
                  Available @ GeeksforGeeks
              
          
    
      
      
          $(".dropdown-item").click(function() {
    
              // Select all list items
              var dropItems = $(".dropdown-item");
              var str = "";
    
              // Remove 'active' tag for all list items
              // based on iteration
              for (let i = 0; i < dropItems.length; i++) {
                  dropItems[i].classList.remove("active");
              }
    
              // Add 'active' tag for currently selected item
              this.classList.add("active");
              $(".active").each(function() {
    
                  // Using text() to append text data
                  str += $(this).text() + " ";
              });
              $("#demo").text(str);
          });
      
  
    

• 输出：