jQuery如果选择，创建一个基于选择的下拉列表

Question

我想做一个多选择下拉列表，我选择不同的意见，并根据选项，它会生成不同的下拉菜单。

$('#select').change(
 
    function() { 
 
    $('#ulSelect').empty(); 
 
    $(this).find('option:selected').each(
 
     function() { 
 
     $('<li />').text($(this).text()).attr('data-value', this.value).appendTo($('#ulSelect')); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="select" name="select"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="c">c</option> 
 
    <option value="d">d</option> 
 
    <option value="e">e</option> 
 
</select> 
 

 
<ul id="ulSelect"></ul>

这个片段使得类似于我想要的东西，但在这里它产生的li元素。用这行代码 $('<li />').text($(this).text()).attr('data-value',this.value).appendTo($('#ulSelect'));我相信。

这怎么能产生一个包含所选值的ID的下拉菜单？

Answer 1

当您创建它时，每个<li>附加一个<select>。

$('#select').change(
 
    function() { 
 
    $('#ulSelect').empty(); 
 
    $(this).find('option:selected').each(function() { 
 
     var select = $("<select>", { // create a <select> with a name depending on the option 
 
     name: "select-" + this.value 
 
     }); 
 
     // Add an initial option to the <select> 
 
     select.append("<option value=''>Please select " + this.textContent + "</option>"); 
 
     // here you can add other options as appropriate 
 
     $('<li/>', { // Create a <li> to hold the <select> 
 
     html: select 
 
     }).appendTo($('#ulSelect')); // And append it to the <ul> 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="multiple" id="select" name="select"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
    <option value="c">c</option> 
 
    <option value="d">d</option> 
 
    <option value="e">e</option> 
 
</select> 
 

 
<ul id="ulSelect"></ul>