jquery-在onchange事件标签内容妥善

Question

下面是我HTML代码：

<select id="sourceNameDropdownId" label="condition " style="width:300px;"> 
</select> 
<div id="tabs" class="selector"> 
</div> 

这里，是我的javascript代码：

$("#DropdownId").change(function() { 
    var sid= $("#DropdownId option:selected").text(); 
    afterclick(sid); 
}); 

我打电话的onchange下拉列表中的事件，以及所选择的值我传递到功能后点击

function afterclick(sid){ 
      var tabsContainer = document.getElementById("tabs"); 
      var crawlTab=document.createElement("ul"); 

     //here in my actual code i am making a ajax call to fetch values for crawlList, providing static values here 

      var crawlList=["name1","name2","name3","name4"]; 

      $.each(crawlList, function(index, crawlType) { 

       var crawlTabElement=document.createElement("li"); 
       crawlTabElement.innerHTML= '<a href="' +"#"+crawlType + '">' +crawlType+'</a>'; 
       crawlTab.appendChild(crawlTabElement); 

      }); 

      tabsContainer.appendChild(crawlTab); 
      var count=1;var tabCount=1; 

      $.each(crawlList, function(index, crawlType) { 
       var contentCrawlTab=document.createElement("div"); 
       contentCrawlTab.setAttribute("id",crawlType); 
       var p='<p>'+crawlType+'</p>'; 

       contentCrawlTab.innerHTML=p; 
       tabsContainer.appendChild(contentCrawlTab); 

      }); 
      $(".selector").tabs(); 

    } 

当第一次加载页面并从下拉列表中选择一个值时，此代码工作正常，但是当我从下拉列表中重新选择值时，显示不正确。 这是我第一次选择页面加载后的值。

当我重新选择从下拉菜单中的表现像这个 -

值有什么样重装重新加载标签格完全，因为它似乎是其追加以前的值和下一次当后点击函数被调用标签元素没有得到正确显示。 我试着清除“制表符”div，使用** $（“#tabs”）.empty（）**但它没有为我工作。

请帮我一把。

Answer 1

检查此工作代码。

$().ready(function() { 
 
     $(".selector").tabs(); 
 
     $("#DropdownId").change(function() { 
 
      var sid = $("#DropdownId option:selected").text(); 
 
      afterclick(sid); 
 
     }); 
 
    }); 
 
    function afterclick(sid) { 
 
     var tabsContainer = document.getElementById("tabs"); 
 
     tabsContainer.innerHTML = ''; 
 
     var crawlTab = document.createElement("ul"); 
 

 
     //here in my actual code i am making a ajax call to fetch values for crawlList, providing static values here 
 

 
     var crawlList = [sid + "1", sid + "2", sid + "3", sid + "4"]; 
 

 
     $.each(crawlList, function (index, crawlType) { 
 
      if (crawlType != null) { 
 
       var crawlTabElement = document.createElement("li"); 
 
       crawlTabElement.innerHTML = '<a href="' + "#" + crawlType + '">' + crawlType + '</a>'; 
 
       crawlTab.appendChild(crawlTabElement); 
 
      } 
 
     }); 
 

 
     tabsContainer.appendChild(crawlTab); 
 
     var count = 1; var tabCount = 1; 
 

 
     $.each(crawlList, function (index, crawlType) { 
 
      if (crawlType != null) { 
 
       var contentCrawlTab = document.createElement("div"); 
 
       contentCrawlTab.setAttribute("id", crawlType); 
 
       var p = '<p>' + crawlType + '</p>'; 
 

 
       contentCrawlTab.innerHTML = p; 
 
       tabsContainer.appendChild(contentCrawlTab); 
 
      } 
 

 
     }); 
 
     $(".selector").tabs('destroy'); 
 
     $(".selector").tabs(); 
 

 
    }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<select id="DropdownId" label="condition " style="width:300px;"> 
 
    <option selected="selected" disabled="disabled">--Select--</option> 
 
    <option>Bilna-ID</option> 
 
    <option>IndiatimesShopping</option> 
 
</select> 
 
<div id="tabs" class="selector"> 
 
</div>