动态选择下拉列表 - 没有选择的选项

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>