突出显示多项选择选项

Question

我有一个多选框

<select id="user_id" name="user_id" disabled multiple="multiple">
</select>

我在页面加载后使用 ajax 填充选择框，一旦数据被填充，选择框就变成了

<select id="user_id" name="user_id" disabled multiple="multiple">
    <option value="256" selected>Manager</option>
    <option value="266" selected>Accountant</option>
</select>

但只有会计在选择框中突出显示，而不是经理。

我试过了

<option value="256" selected="selected">
<option value="256" selected="true">

但仍然只有最后一个突出显示，而不是具有选定属性的所有选项。

如何突出显示所有选定的选项？除了添加自定义 css 类还有其他方法吗？我是不是做错了什么？

任何帮助表示赞赏！提前致谢！

Answer 1

您的 HTML 在正常渲染上看起来不错：

<select id="user_id" name="user_id" disabled multiple="multiple">
    <option value="256" selected>Manager</option>
    <option value="266" selected>Accountant</option>
</select>

但即使在使用 jQuery 进行动态渲染时，它仍然看起来不错。

以下对我有用：

$(function(){
  var items = [
  $('<option value="volvo" selected>Volvo</option>'),
  $('<option value="saab" selected>Saab</option>'),
  $('<option value="audi">Audi</option>')
  ];

  $('select#toLoad').append(items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="toLoad" name="cars" disabled multiple>
</select>

更新：OP 提出了一个进一步的问题，“如果多个属性也被动态分配并且加载时是单个选择框怎么办？”让我们看看：

$(function(){
  var items = [
  $('<option value="volvo" selected>Volvo</option>'),
  $('<option value="saab" selected>Saab</option>'),
  $('<option value="audi">Audi</option>')
  ];

  $('select#toLoad').attr('multiple', 'multiple');
  $('select#toLoad').append(items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="toLoad" name="cars" disabled>
</select>

这似乎行得通，但这行不通：

$(function(){
  var items = [
  $('<option value="volvo" selected>Volvo</option>'),
  $('<option value="saab" selected>Saab</option>'),
  $('<option value="audi">Audi</option>')
  ];

  $('select#toLoad').append(items);
  $('select#toLoad').attr('multiple', 'multiple');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="toLoad" name="cars" disabled>
</select>

正如我们所见：订单很重要！