Wählen Sie die nächste Option mit jQuery

Lesezeit: 3 Minuten

Benutzer-Avatar
Clemens Andraud

Ich versuche, eine Schaltfläche zu erstellen, die die nächste Option auswählen kann.

Also habe ich eine Auswahl (id=selectionChamp) mit mehreren Optionen, eine Eingabe als nächstes (id=fieldNext), und ich versuche das:

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected', 'select').removeAttr('selected')
          .next('option').attr('selected', 'selected');

    alert($('#selectionChamp option:selected').val());      
});

Aber ich kann die nächste Option nicht auswählen. Danke!

  • Laden Sie DOM beim Laden der Seite?

    – Riz

    19. Juli 2012 um 8:14 Uhr

  • Bedeutet, dass Sie diesen Code in der Bereitschaftsfunktion verwenden?

    – Riz

    19. Juli 2012 um 8:24 Uhr

  • Verwenden Sie die neueste Version von jquery und on Methode zur Ereignisbindung.

    – Riz

    19. Juli 2012 um 8:25 Uhr

  • Ja, in Bereitschaftsfunktion. Aber es ist ok, ich habe meine Antwort ^^

    – Clemens Andraud

    19. Juli 2012 um 8:32 Uhr

Benutzer-Avatar
Bugräder94

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected').next().attr('selected', 'selected');

    alert($('#selectionChamp').val());      
});

Bessere Antwort von @VisioN: https://stackoverflow.com/a/11556661/1533609

  • Muss auch die aktuelle Option abwählen, z $('#selectionChamp option:selected').attr('selected', false);

    – Antony Gore

    10. Februar 2015 um 1:10 Uhr


  • @anthonygore hat recht. Wenn Sie dies für die aktuelle Version von Safari nicht löschen, ergibt dies einen Nullwert und das Auswahlmenü bleibt auf dem ursprünglichen Wert.

    – teewuane

    29. Oktober 2015 um 20:31 Uhr

  • Ohne ging das bei mir nicht .trigger('change')

    – Ingus

    19. November 2019 um 14:11 Uhr

  • @teewuane Ich glaube, ich nehme dein Wort, aber es ergibt keinen Sinn. Sobald Sie die Auswahl aufheben, scheint $(‘#selectionChamp option:s selected’) das erste Element in der Dropdown-Liste zurückzugeben. Scheint, als wäre die Antwort von VisioN vernünftiger.

    – sg_mann

    6. Januar 2020 um 18:48 Uhr

  • @sg_man ja. Seine Antwort ist besser. Ich habe vor 7 Jahren vor 2 Minuten darauf geantwortet, also wird es akzeptiert, aber seine Antwort ist besser. ohne Zweifel

    – Bugwheels94

    6. Januar 2020 um 19:10 Uhr

Benutzer-Avatar
Vision

$("#fieldNext").click(function() {
    $("#selectionChamp > option:selected")
        .prop("selected", false)
        .next()
        .prop("selected", true);
});​

DEMO: http://jsfiddle.net/w9kcd/1/

  • Ihr Beispiel durchläuft die Elemente nicht … Hört einfach beim letzten auf.

    – Aleksandar Pavić

    4. Dezember 2018 um 12:13 Uhr

  • @AleksandarPavić Warum sollte es?

    – Vision

    4. Dezember 2018 um 15:26 Uhr

  • Entschuldigung, Sie haben Recht, es ist nicht erforderlich, die ursprüngliche Anfrage zu durchlaufen, aber hier ist eine verbesserte Antwort, die das Änderungsereignis auf jQuery-Art durchläuft und auslöst, schließlich geht es darum, den Menschen die besten Antworten zu geben jsfiddle.net/acosonic/2cg9t17j/3

    – Aleksandar Pavić

    6. Dezember 2018 um 6:29 Uhr

Benutzer-Avatar
RobG

Auch ohne jQuery ziemlich einfach. Dieser wird zur ersten Option zurückkehren, sobald die letzte erreicht ist:

function nextOpt() {
  var sel = document.getElementById('selectionChamp');
  var i = sel.selectedIndex;
  sel.options[++i%sel.options.length].selected = true;
}

window.onload = function() {
  document.getElementById('fieldNext').onclick = nextOpt;
}

Etwas Test-Markup:

<button id="fieldNext">Select next</button>
<select id="selectionChamp">
 <option>0
 <option>1
 <option>2
</select>

  • Lang lebe RobG!

    – php_nub_qq

    12. Oktober 2019 um 21:13 Uhr

Benutzer-Avatar
Riz

$(function(){
  $('#button').on('click', function(){
    var selected_element = $('#selectionChamp option:selected');
    selected_element.removeAttr('selected');
    selected_element.next().attr('selected', 'selected');

    $('#selectionChamp').val(selected_element.next().val());

  });
});

http://jsbin.com/ejunoz/2/edit

Ich würde erwarten, dass eine solche Schaltfläche Optionen durchläuft und auch ein Änderungsereignis auslöst. Hier ist eine mögliche Lösung dafür:

$("#fieldNext").click(function() {
  if ($('#selectionChamp option:selected').next().length > 0) 
    $('#selectionChamp option:selected').next().attr('selected', 'selected').trigger('change');
  else $('#selectionChamp option').first().attr('selected', 'selected').trigger('change');
});

Hier ist jsFiddle: http://jsfiddle.net/acosonic/2cg9t17j/3/

$('#fieldNext').click(function() {
$('#selectionChamp option:selected').removeAttr('selected')
      .next('option').attr('selected', 'selected');

alert($('#selectionChamp option:selected').val());      
});

Benutzer-Avatar
jbrtrnd

Versuche dies :

    $(document).ready(function(){
        $("#fieldNext").on("click",function(){
            $optionSelected = $("#selectionChamp > option:selected");
            $optionSelected.removeAttr("selected");
            $optionSelected.next("option").attr("selected","selected");       
        });
    });

1157720cookie-checkWählen Sie die nächste Option mit jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy