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

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

以下方法将清楚地说明：

方法1：最初使用removeClass()方法删除以前附加的数据菜单项的活动类。然后是addClass()方法，以添加当前附加的数据菜单项的活动类。现在，使用each()函数添加有关单击时添加或删除的活动类的数据。

• 示例：下面的Alert选择示例说明了使用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：最初用于循环删除先前附加的数据菜单项的活动类，此处基于借助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);
          });
      
  
    

• 输出：