Question

有谁知道我如何根据从列表框中选择的内容创建动态标签？

这就是我所拥有的：

列表框：

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

根据用户从列表框中选择的内容，当用户按下“检索”按钮时，将根据用户从“列表框”中选择的值的数量创建选项卡数。

例如：

假设用户已从列表框中选择了 3个项，然后点击按钮，应在相同的页面底部创建 3个标签 页面，标签名称为列表框项目文本。

输出：

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

          ListBox

       RetrieveButton

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

           Tabs:

Apple | Watermelon | Kiwi

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

非常感谢任何帮助。谢谢！

Answer 1

代码取决于您计划如何显示标签。使用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或bootstrap选项卡。

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

根据ASP.Net中的列表框中选择的值动态创建选项卡

1 个答案: