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" );

}

它确实显示了我需要的用户名，但是，select不会更改所选的类。如何将所选类添加到正在显示的元素中？

我在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>

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

1 个答案: