2010-11-27 51 views
5

Je génère une liste de sélection avec des éléments d'option dans jQuery. Simplifié, il ressemble à ceci:Définition de l'attribut sélectionné sur un élément d'option pour réel à l'aide de jQuery

var sel = $("<select>"); 
$.each(data, function(i, v){ 
    $("<option>").attr({ "value": i }).html(v).appendTo(sel); 
}); 

Ensuite, je veux une option à sélectionner. Normalement je ferais quelque chose comme:

$(sel).val(1); 

Mais alors l'option n'a pas l'attribut sélectionné présent.

$(sel).html() donne quelque chose comme:

<option value="1">1</option> 
<option value="2">2</option> 

et ce que je pensais:

<option value="1" selected="selected">1</option> 
<option value="2">2</option> 

J'ai essayé cette approche (même résultat que l'utilisation .val()):

$.each(data, function(i, v){ 
    var attrs = { "value": i }; 
    if(i == 1){ 
     attrs.selected = "selected"; 
    } 
    $("<option>").attr(attrs).html(v).appendTo(sel); 
}); 

mais la seule façon dont j'ai trouvé le travail est:

$.each(data, function(i, v){ 
    var el = "<option>"; 
    if(i == 1){ 
     el = '<option selected="selected"></option>'; 
    } 
    $(el).attr({ "value": i }).html(v).appendTo(sel); 
}); 

Existe-t-il un autre moyen ou un meilleur moyen?

Répondre

7

Vous pouvez utiliser le native setAttribute() method. Je crois que jQuery confond la distinction entre les attributs et les propriétés.

Cela devient le <option> vous voulez par son index à partir du options collection de l'élément <select>, et définit l'attribut:

sel[0].options[1].setAttribute('selected','selected'); 

Ou celui-ci utilise jQuery pour définir la valeur d'abord, puis retourne et obtient l'option correcte à l'aide le native selectedIndex property.

sel.val(1); 
sel[0].options[sel[0].selectedIndex].setAttribute('selected','selected'); 

EDIT: Off sujet un peu, mais vous pouvez créer les <option> éléments un peu différemment comme ceci:

$("<option>",{ 
    value: i, 
    html: v 
}).appendTo(sel); 

Depuis jQuery 1.4, vous pouvez envoyer une collection de valeurs vous souhaitez définir un nouvel élément.

+1

+1 - http://jsfiddle.net/QFFeF/1/ – karim79

+1

Cochez la case jQuery et les interceptions attr lorsqu'elles sont sélectionnées et utilisez selectedIndex. Merci pour la réponse - facile d'oublier qu'il y avait un temps avant jQuery :) – sunn0