高亮显示多个选择选项

Question

我有一个多选框为

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

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

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

但AJAX填充选择框只有会计师突出显示在选择框中而不是管理器中。

我试着用

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

UPDATE：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>

因此，当我们看到：订购事宜！