创建选项卡动态基于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中列表框中选择的值

回答

相关问题