jQuery Set Option sélectionnée en utilisant Next

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:

 Number 1 Number 2 Number 3 Number 4

Nous pouvons voir que “Number 2” est sélectionné, et en utilisant jQuery, je voudrais définir “Number 3” comme sélectionné, et supprimer le “atsortingbut” sélectionné de “Number 2”. Je suppose que je dois utiliser le sélecteur suivant , mais je ne sais pas trop comment l’implémenter.

 $('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected');

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

Mettre à jour:

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

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

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

Réponse originale:

Si vous souhaitez sélectionner par la valeur de l’option REGARDLESS de sa position (cet exemple suppose que vous avez un identifiant 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.

A partir de la version 1.6.1, il est conseillé d’utiliser la méthode prop pour les atsortingbuts / 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 reporter à http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

vous pouvez utiliser

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

 $('option:selected + option')

Et définissez la valeur:

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

Et si vous voulez spécifier l’ID de sélection:

 $("#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 actuelle

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.

C’est ce que je viens d’utiliser, j’aime la propreté 🙂

 $('select').val(function(){ var nextOption = $(this).children(':selected').next(); return $(nextOption).val(); }).change();

 $('your_select option:selected').next('option').prop('selected', true)

 $('#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.

Trouvez la ligne, puis

 var row = $('#yourTable');

la valeur que vous voulez sélectionner

 var theValue = "5"; row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected');

  $("select").prop("selectedIndex",$("select").prop("selectedIndex")+1)

 $('#my_sel').val($('#my_sel option:selected').next().val()); $('#my_sel').val($('#my_sel option:selected').prev().val());