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>