create-tabs-dynamically-based-on-values-selected-in-listbox-in-asp-net

http://stackoverflow.com/questions/32690630/create-tabs-dynamically-based-on-values-selected-in-listbox-in-asp-net

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<select id='SelectionListBox' multiple>
    <option value=1>A</option>
    <option value=2>B</option>
    <option value=3>C</option>
    <option value=4>D</option>
</select>
<button id='add-tab'>Add Tabs</button>
<div id='tabs'>
    <ul></ul>
</div>

JavaScript

$("div#tabs").tabs().hide();
$("button#add-tab").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#add-tab').prop('disabled', false);
    }

});