創建選項卡動態基於ASP.Net中列表框中選擇的值

沒有人知道如何創建選項卡動態基於從列表框中選擇的內容？創建選項卡動態基於ASP.Net中列表框中選擇的值

這是我有：

列表框：

<asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px"> 
    <asp:ListItem Text="Apple" Value ="1" /> 
    <asp:ListItem Text="Watermelon" Value ="2" /> 
    <asp:ListItem Text="Kiwi" Value ="3" /> 
    <asp:ListItem Text="Plum" Value ="4" /> 
    <asp:ListItem Text="Pineapple" Value ="5" /> 
</asp:ListBox>

RetrieveButton：

<asp:Button ID="RetrieveButton" runat="server" Text="Button" />

基於什麼樣的用戶已經從列表框中選擇，用戶時按下「檢索」按鈕時，將根據va的數量創建標籤數量lues用戶已從列表框中選擇。

例如：

比方說，用戶已經從列表框中選擇3項並點擊按鈕，3個標籤應在頁面底部用的相同頁面上創建標籤名稱作爲列表框項目文本。

輸出：

+ ---------------------------------- +

  ListBox 

     RetrieveButton

+ ---------------------------------- +

  Tabs: 

Apple | Watermelon | Kiwi

+ - --------------------------------- +

任何幫助都很大ppreciated。謝謝！

來源

2015-09-21 Felicia Soh

代碼將取決於您打算如何顯示選項卡。使用jqueryUI動態標籤可以通過添加li元素輕鬆添加。請參閱下面的代碼示例（我使用了HTML選擇 - 你可能需要使用列表框的相應客戶端ID）

$('document').ready(function(){ 
    $("div#tabs").tabs().hide(); 
    $("button#RetrieveButton").click(function (e) { 
     e.preventDefault(); 

     $('#SelectionListBox option:selected').each(function() { 
      var txt = $(this).text(); 

      $("div#tabs ul").append(
       "<li><a href='#tab" + txt + "'>#" + txt + "</a></li>"); 
      $("div#tabs").append(
       "<div id='tab" + txt + "'>#" + txt + "</div>"); 
      $("div#tabs").tabs("refresh"); 
     }); 

     if ($("div#tabs ul li").length) { 
      $('div#tabs').show(); 
      $('button#RetrieveButton').prop('disabled', true); 
     } 

    }); 
};

演示：JsFiddle

編輯：下面的代碼嘗試使用JavaScript來做同樣的事情。請注意，下面的代碼或多或少未經測試，並且試圖「重新發明輪子」。建議使用jQueryUI或引導標籤。

ASPX

<head runat="server"> 

    <title></title> 

    <style type="text/css"> 
     .Initial 
     { 
      display: block; 
      padding: 4px 18px 4px 18px; 
      float: left; 
      /*background: url("../Images/InitialImage.png") no-repeat right top;*/ 
      background-color: dimgray; 
      color: Black; 
      font-weight: bold; 
     } 
     .Initial:hover 
     { 
      color: White; 
      /*background: url("../Images/SelectedButton.png") no-repeat right top;*/ 
      background-color: gray; 
     } 
     .Clicked 
     { 
      float: left; 
      display: block; 
      /*background: url("../Images/SelectedButton.png") no-repeat right top;*/ 
      background-color: blue; 
      padding: 4px 18px 4px 18px; 
      color: Black; 
      font-weight: bold; 
      color: White; 
     } 
     #tabs-content 
     { 
      float:left; 
      clear:both; 
     } 
     #tabs-content div 
     { 
      display:none; 
      border-style:double; 
      border-width:2px; 
      min-width: 600px; 
      min-height:200px; 
     } 
</style> 
<script type="text/javascript"> 
     function changeTab(ctrl) { 
      var id = ctrl.getAttribute('data-tab'); 
      var allTabContents = document.getElementById('tabs-content').getElementsByTagName('div'); 
      var tabContent = document.getElementById(id); 

      for (var i = 0; i < allTabContents.length; i++) { 
       allTabContents[i].style.display = 'none'; 
      } 
      tabContent.style.display = 'block'; 
     } 

     function addTabs() { 
      var top = document.getElementById('tabs-link'); 
      var bottom = document.getElementById('tabs-content'); 

      var allTabContents = document.getElementById('tabs-content').getElementsByTagName('div'); 
      var tabCount = 1; 

      for (var i = 0; i < allTabContents.length; i++) { 
       tabCount++; 
      } 

      var listBox = document.getElementById('SelectionListBox'); 
      for (var i = 0; i < listBox.options.length; i++) { 
       if (listBox.options[i].selected) { 
        var newTab = document.createElement('div'); 
        newTab.setAttribute('class', 'Initial'); 
        newTab.setAttribute('data-tab', 'tab'+tabCount); 
        newTab.setAttribute('onclick', 'changeTab(this)'); 
        newTab.innerText = listBox.options[i].text; 
        top.appendChild(newTab); 

        var newTabContent = document.createElement('div'); 
        newTabContent.setAttribute('id', 'tab' + tabCount); 
        newTabContent.innerText = listBox.options[i].text; 
        bottom.appendChild(newTabContent); 

        tabCount++; 
       } 
      } 
      return false; 
     } 

</script> 
</head> 
<body > 
    <form id="form1" runat="server"> 
    <asp:ListBox ID="SelectionListBox" runat="server" AppendDataBoundItems="True" SelectionMode="Multiple" Height="130px" Width="350px"> 
      <asp:ListItem Text="Apple" Value ="1" /> 
      <asp:ListItem Text="Watermelon" Value ="2" /> 
      <asp:ListItem Text="Kiwi" Value ="3" /> 
      <asp:ListItem Text="Plum" Value ="4" /> 
      <asp:ListItem Text="Pineapple" Value ="5" /> 
     </asp:ListBox> 
     <asp:Button ID="RetrieveButton" runat="server" Text="Button" OnClientClick="return addTabs()" /> 
     <div id="tabs"> 
      <div id="tabs-link"> 

      </div> 
      <div id="tabs-content"> 

      </div> 
     </div> 
    </form> 
</body>

來源

2015-09-21 09:37:58 Taleeb

Taleeb您好，感謝的解決方案！我是jquery的新手，所以當我試圖將這段代碼添加到我的項目中時，發生錯誤。你知道除jQuery之外的其他解決方案嗎？ –

你是否在使用任何標籤插件（基本上你打算如何呈現標籤）。也讓我們知道你得到的錯誤，我們可以嘗試解決這個問題。 – Taleeb

@ FeliciaSoh。我已經使用純JavaScript添加了一個代碼（沒有jQuery/jQueryUI）。除其他問題之外 - 代碼的一個問題是它沒有響應。如果你可以使用jQuery或bootstrap標籤，那將會好得多.. – Taleeb

創建選項卡動態基於ASP.Net中列表框中選擇的值

回答

相關問題