web-dev-qa-db-fra.com

Boîte de sélection d'actualisation JQuery

Je renseigne un champ de sélection à l'aide de JQuery lors du chargement de page à l'aide de cette méthode 

 $('#select').append('<option value="' + result + '">' + result + '</option>');

Cependant, la case de sélection est laissée vide, c'est-à-dire que la première valeur de la liste d'options n'est pas présélectionnée comme option sélectionnée. 

Comment "actualiser" cette liste afin que la première valeur soit présélectionnée?

Désolé - j'aurais dû dire que c'était JQuery Mobile avant

Je vous remercie.

jqueryselectjquery-mobileoption
11
user1202278

Vous pouvez ajouter un attribut "sélectionné" à l'élément d'option que vous souhaitez sélectionner:

$('#select')
    .append('<option value="' + result + '" selected="selected">' + result + '</option>');

Vous ne spécifiez pas comment vous remplissez exactement l'élément que vous sélectionnez, en utilisant une boucle, vous pouvez le faire comme ceci:

var data = ['a', 'b', 'c'];
var $select = $('#select'); // you might wanna empty it first with .empty()

for (var i = 0; i < data.length; i++) {
    var o = $('<option/>', { value: data[i] })
        .text(data[i])
        .prop('selected', i == 0);
    o.appendTo($select);
}​

D&EACUTE;MO

Il semble donc que vous utilisez jQuery Mobile comme vous l'avez dit dans le commentaire.

Si vous utilisez le selectmenu widget, vous devez actualiser par programme après avoir modifié le contenu/la structure de son programme:

$select.selectmenu("refresh", true);

Documentation

21
Didier Ghys

Vous pouvez utiliser

$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');
4
Mohora Bogdan

Simplement .. vous définissez la valeur comme vous le souhaitez, c'est-à-dire: $('#select').val(5); .. donc dans votre cas, sa $('#select').val(result);

Edit: un exemple de travail complet inclus: 

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<select id='select'></select>
<br>
<input type=button onclick='addNew()' value='Add'>

<script>
function addNew()
{
        var result = Math.floor(Math.random()*1000);
        $('#select').append('<option value="' + result + '">' + result + '</option>'); 
        $('#select').val(result);           
} 
</script>

Le plus grand centre commercial

3
Ashraf

Tous les navigateurs n'actualisent pas la sélection automatiquement après avoir ajouté une nouvelle option.

Une astuce qui fonctionne pour moi est de masquer et d'afficher la zone de sélection juste après l'ajout de nouvelles options. Donc dans votre cas:

 $('#select').append('<option value="' + result + '">' + result + '</option>').hide().show();

En ce qui concerne la sélection de l’option correcte nouvellement ajoutée, procédez comme suit:

 $('select').val(result);
1
gintas

La réponse de Mohora Bogdan ne fonctionne qu'une fois. Si vous sélectionnez une autre option, cela ne fonctionne plus. 

Pour en faire un usage réutilisable:

$('#select').prop('selected', false).find('option:first').prop('selected', true);
0
Hooman