jquery - 动态选择下拉菜单 - 没有选择的选项

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>