Sélectionnez Multiple Sélectionner une option

Question

J'ai une boîte de sélection multiple

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

Je peuplant la zone de sélection à l'aide ajax après chargement de la page et une fois que les données sont rempli la boîte de sélection devient

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

Mais seul le comptable est mis en surbrillance dans la zone de sélection et non dans le gestionnaire.

J'ai essayé avec

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

mais seul le dernier est mis en évidence pas toutes les options avec l'attribut sélectionné.

Comment mettre en surbrillance toutes les options sélectionnées? Y a-t-il un autre moyen que d'ajouter une classe css personnalisée? Est-ce que je fais quelque chose de mal?

Toute aide appréciée! Merci d'avance!

Answer 1

Votre HTML semble bien sur un écran normal rendu:

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

Mais même sur une dynamique rendu avec jQuery, il semble toujours très bien.

Les œuvres suivantes pour moi:

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

MISE À JOUR: OP a soulevé une autre question: « Et si l'attribut multiple est également attribué dynamiquement et une seule boîte de sélection de la charge? " Voyons voir:

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

Cela a semblé fonctionner, mais cela ne fait pas:

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

Alors que nous voyons: les questions d'ordre!