Javascript jquery-onchange事件选项卡内容未正确显示

下面是我的HTML代码：

我在下拉列表中调用onchange事件，并在单击后将所选值传递给函数

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

当我从下拉列表中重新选择值时，其显示如下-

是否有类似于重新加载的方法来完全重新加载tabs div，因为它似乎附加了以前的值，并且下次调用afterclick函数时，tab元素没有正确显示。 我也尝试过用**$tabs.empty**清除tabs div，但对我无效

---

请帮助我。

检查此工作代码

$.readyfunction{ $.selector.tabs； $DropdownId.changefunction{ var sid=$DropdownId选项：selected.text； 后ClickSID； }; }; ClickSID后的函数{ var tabsContainer=document.getElementByIdtabs； tabsContainer.innerHTML=； var crawlTab=document.createElementul； //在我的实际代码中，我正在进行一个ajax调用，以获取crawlList的值，在这里提供静态值 var crawnlist=[sid+1、sid+2、sid+3、sid+4]； $.eachCrawlist，函数索引，爬网类型{ 如果爬行类型！=null{ var crawlTabElement=document.createElementli； crawlTabElement.innerHTML=； crawlTab.appendChildScrawltab元素； } }; tabsContainer.appendChildScrawlTab； var count=1；var tabCount=1； $.eachCrawlist，函数索引，爬网类型{ 如果爬行类型！=null{ var contentCrawlTab=document.createElementdiv； contentCrawlTab.setAttributeid，爬行类型； var p=''+crawlType+'

'； contentCrawlTab.innerHTML=p； tabsContainer.AppendChildContentScrawlTab； } }; $.selector.tabs“销毁”； $.selector.tabs； } -挑选- 比尔纳ID 独立通讯

---

DropdownId不应该是sourceNameDropdownId吗？当您使用tabs.empty时发生了什么？您把它放在哪里了？请提供一个示例？

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

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

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

  }