JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css">
<div class="login-homepage"> 
 <select id="DropDownList1">
     <option value="product1">Camera</option>
     <option value="product2">DVD</option> 
     <option value="product3">LCD</option> 
 </select> 
 <a href="#" id="login">login</a> 
 <div id="product" title="product-container">show the selected dropdownlist </div>  
</div>
<div title='showproducts' id='productdialog' style="display:none"><div id='showem'></div>
 <select id="DialogList">
 </select> 
</div>

JavaScript

$(document).ready(function() {
    $("#productdialog").dialog({
        height: 140,
        modal: true,
        autoOpen: false
    });

    $('a#login').click(function() {
        var pick = $('#DropDownList1 option:selected').text();
        var pickVal = $('#DropDownList1 option:selected').val()
        $('#showem').text($('#DropDownList1 option:selected').text());
        var insertCount = 4;
        var optionList = '';
        while (insertCount--) {
            optionList = optionList + '<option value="' + pickVal + insertCount + '">' + pick + insertCount + '</option>';
        };
        $('#DialogList').html(optionList);
        $("#productdialog").dialog("open");
    });
});