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

  }

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

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

是否有类似重新加载的内容完全重新加载标签 div，因为它似乎附加了之前的值，下次是重新点击函数被称为标签元素未正确显示。我也尝试清除“tabs”div，使用** $（“＃tabs”）。empty（）**但它对我没用。

请帮帮我。

Answer 1

检查此工作代码。

＆＃13;

$().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();

    }

＆＃13;

<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>

＆＃13;

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

1 个答案: