動態選擇下拉列表 - 沒有選擇的選項

Question

我想創建一個動態選擇;

我每次創建數據庫表中的用戶，它增加了一個<td class="users">的標記：<td class="users">name of the user extracted from the db</td>

HTML

<select id="selectUser"> 
    <option selected disabled>Select a user...</option> 
</select> 

JS

var names = {}; 
$('.users').each(function() { 
    names = $(this).html(); 
    printContent(names); 
}); 

function printContent(content) 
{ 
    $('<option class="selectOption">' + content + '</option>').appendTo("#selectUser"); 

} 

而且它顯示用戶的名稱，因爲我需要，但是，選擇不會更改選定的類。如何將選定的類添加到它正在顯示的元素中？

我在http://jsfiddle.net/hh7r7p3w/中添加了代碼。值得一提的是，帶有用戶名的真實數據來自數據庫，因此這個名稱可以變化。

我是否正在嘗試做一些我無法做到的事情？

謝謝

Answer 1

您可以添加選項的屬性作爲

$(document).ready(function() { 
 

 
    var names = {}; 
 
    $('.users').each(function() { 
 
    names = $(this).html(); 
 
    printContent(names); 
 
    }); 
 

 
    function printContent(content) { 
 
    $('option:selected').prop('selected', false); 
 
    $('<option class="selectOption">' + content + '</option>').appendTo("#selectUser"); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="users">User 1</td> 
 
    <td class="users">User 2</td> 
 
    <td class="users">User 3</td> 
 
    <td class="users">User 4</td> 
 
    <td class="users">User 5</td> 
 
    </tr> 
 
</table> 
 

 
<select id="selectUser"> 
 
    <option selected disabled>Select a user...</option> 
 
</select>