突出显示多个 Select 选项

Question

我有多个 select 框作为

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

我在页面加载后使用 ajax 填充 select 框，填充数据后 select 框变为

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

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

我试过

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

但仍然只有最后一个突出显示，并非所有具有 selected 属性的选项。

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

感谢任何帮助！提前致谢！

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 提出了一个进一步的问题，"What if the multiple attribute is also assigned dynamically and is a single select box on load?"让我们看看：

$(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>

正如我们所见：顺序很重要！

突出显示多个 Select 选项

Highlight Multiple Select Option

html

javascript

css

jquery

multiple-select