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>

所以我们看到：订单很重要！

突出显示多选选项

1 个答案: