web-dev-qa-db-fra.com

jQuery Définir l'option sélectionnée à l'aide de Suivant

Comment puis-je, en utilisant jQuery, définir l'élément "suivant" d'un élément déjà sélectionné comme "sélectionné".

Par exemple, si j'ai:

<select>
<option value="1" >Number 1</option>
<option value="2" selected="selected">Number 2</option>
<option value="3" >Number 3</option>
<option value="4" >Number 4</option>
</select>

Nous pouvons voir que "Numéro 2" est sélectionné, et en utilisant jQuery, je voudrais définir "Numéro 3" comme sélectionné, et supprimer "l'attribut" sélectionné de "Numéro 2". Je suppose que je dois utiliser le sélecteur suivant, mais je ne sais pas trop comment l'implémenter.

jqueryhtml-select
42
Dodinas
$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');

Consultez le code de travail ici http://jsbin.com/ipewe/edit

60
Dhana

Mise à jour:

Depuis jQuery 1.6+, vous devez utiliser prop() au lieu de attr() dans ce cas.

La différence entre les attributs et les propriétés peut être importante dans des situations spécifiques. Avant jQuery 1.6, la méthode .attr () tenait parfois compte des valeurs de propriété lors de la récupération de certains attributs, ce qui pouvait entraîner un comportement incohérent. Depuis jQuery 1.6, la méthode .prop () fournit un moyen de récupérer explicitement les valeurs des propriétés, tandis que .attr () récupère les attributs.

var theValue = "whatever";
$("#selectID").val( theValue ).prop('selected',true);


Réponse originale:

Si vous souhaitez sélectionner par la valeur de l'option, INDÉPENDAMMENT de sa position (cet exemple suppose que vous avez un ID pour votre sélection):

var theValue = "whatever";
$("#selectID").val( theValue ).attr('selected',true);

Vous n'avez pas besoin de "désélectionner". Cela se produit automatiquement lorsque vous en sélectionnez un autre.

115
GtotheB

À partir de la version 1.6.1, il est conseillé d'utiliser la méthode prop pour les attributs/propriétés booléens tels que selected, readonly, enabled, ...

var theValue = "whatever";
$("#selectID").val( theValue ).prop('selected',true);

Pour plus d'informations, veuillez vous référer à http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

17
Can Ho

vous pouvez utiliser

$('option:selected').next('option')

ou

$('option:selected + option')

Et définissez la valeur:

var nextVal = $('option:selected + option').val();
$('select').val(nextVal);
6
Kobi

Et si vous souhaitez spécifier l'ID de select:

$("#nextPageLink").click(function(){
  $('#myselect option:selected').next('option').attr('selected', 'selected');
  $("#myselect").change();
});

Si vous cliquez sur l'élément avec l'ID "nextPageLink", l'option suivante sera sélectionnée et l'événement onChange () sera appelé. Cela peut ressembler à ceci:

$("#myselect").change(function(){
  $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()});
});

L'événement OnChange () utilise Ajax pour charger quelque chose dans le div spécifié.

window.location.pathname = adresse réelle

L'événement OnChange () est défini car il vous permet de modifier la valeur non seulement à l'aide du bouton netx/prev, mais directement à l'aide de la sélection standard. Si la valeur est modifiée, la page fait quelque chose automatiquement.

3
Racky

C'est ce que je viens d'utiliser, j'aime sa propreté :-)

$('select').val(function(){
    var nextOption = $(this).children(':selected').next();
    return $(nextOption).val();
}).change();
1
Andy
$('your_select option:selected').next('option').prop('selected', true)
1
Memonic
$('#my_sel').val($('#my_sel option:selected').next().val());
$('#my_sel').val($('#my_sel option:selected').prev().val());
0
Krishna Murthy

Trouvez la ligne, puis

var row = $('#yourTable');

la valeur que vous souhaitez sélectionner

var theValue = "5";
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected');
0
Vins
  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1)
0
zloctb
$('#next').click( function(){
    $('#colored_background option:selected').next('option').attr('selected', 'selected');
    changeBackgroundColor();
});

Travailler chez Quelle est ma couleur préférée? . Cliquez sur les flèches.

0
David Lefkon