jquery-が正しく

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イベントのドロップダウンリストで選択した値を関数に渡しますafterclick

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(); 

    } 

このコードは、初めてページが読み込まれ、値がドロップダウンから選択されたときにうまくいきますが、ドロップダウンから値を再選択するとタブが正しく表示されません。 これは、ページがロードされた後初めて値を選択するときです。

と私はそのはthis-

のように示すドロップダウンから値を再選択するとき、それはそのアペンドようだと、完全にタブのdivをリロードするリロードのようなものがあります以前の値と次回の時刻がのafterclickというタブ要素が正しく表示されていません。 ** $（ "#tabs"）.empty（**）を使って "tabs" divもクリアしようとしました**しかし、それは私のために働いていませんでした。

私を助けてください。

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>