Selectize.js Wie funktioniert getAdjacentOption()?

Question

Ich habe selectize.js verwendet, aber ich bin ein bisschen bei der Verwendung von getAdjacentValue() fest.

in der API findet man:

getAdjacentOption (Wert, Richtung) `Ermittelt das jQuery Element für die vorhergehende oder nächste Option, relativ zur aktuell markierten Option. Das Argument "direction" sollte 1 für "next" oder -1 für "previous" sein.

Minimal funktionierendes Beispiel, jsFiddle.

<select id='car' name='car'> 
    <option value='1'>Mercedes</option> 
    <option value='2' selected>BMW</option> 
    <option value='3'>Volvo</option> 
</select> 

Und .js

$('select').selectize(); 
var obj = $('select')[0].selectize; 

Aber wie kann ich den nächsten und vorherigen Wert des aktuell ausgewählten Artikels erhalten? Ich verstehe nicht, wie die API-Hilfe implementiert wird.

Answer 1

Die API Dokumentation ist nicht sehr klar darüber, was das value Argument sein soll, wenn getAdjacentOption(value, direction) aufgerufen wird.

Wenn Sie getAdjacentOption in der Quelle der selectize.js Nachschlag erhalten Sie

getAdjacentOption: function($option, direction) { 
    var $options = this.$dropdown.find('[data-selectable]'); 
    var index = $options.index($option) + direction; 

    return index >= 0 && index < $options.length ? $options.eq(index) : $(); 
}, 

uns Dies sagt feststellen, dass getAdjacentOption Verwendung der jQuery .index() Methode macht, die einen Selektor oder ein Element akzeptiert.

So kann das Aufrufen von obj.getAdjacentOption(2,1) Ihnen nicht das erwartete Ergebnis geben, weil Sie ein Int an die Funktion als das erste Argument übergeben.

Aber es so zu nennen obj.getAdjacentOption("2",1) wird auch nicht helfen, auch wenn "2" der Wert der aktuell ausgewählten Option sein könnte.

Um eine lange Geschichte in dem aktuell ausgewählten Element kurz zu machen. Hier

ist ein Beispiel

$(document).ready(function() { 
 
    var $select = $('select').selectize(); 
 
    var obj = $select[0].selectize; 
 
    obj.refreshOptions(false); 
 
    
 
    var crnt = obj.getOption(obj.getValue()); 
 

 
    console.log("Prev option is:", 
 
       obj.getAdjacentOption(crnt,-1).text(), 
 
       "with a value of", 
 
       obj.getAdjacentOption(crnt,-1).data("value")); 
 
    
 
    console.log("Next option is:", 
 
       obj.getAdjacentOption(crnt,1).text(), 
 
       "with a value of", 
 
       obj.getAdjacentOption(crnt,1).data("value")); 
 

 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/css/selectize.default.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.2/js/standalone/selectize.js"></script> 
 

 
<select id='car' name='car'> 
 
    <option value='1'>Mercedes</option> 
 
    <option value='2' selected>BMW</option> 
 
    <option value='3'>Volvo</option> 
 
</select>

Answer 2

zu verbessern, was DavidDomain sagte, ich habe eine Schaltfläche, um den nächsten Wert in der Auswahl zu gehen, so dass ich tat dies:

$('#btnNext').click(function(){ 
    var $select = $('#ddlClients').selectize(); 
    var obj = $select[0].selectize; 
    obj.refreshOptions(false); 

    var crnt = obj.getOption(obj.getValue()); 
    var next = obj.getAdjacentOption(crnt, 1).data("value"); 
    obj.setValue(next); //here is where the value is setted as selected 
}); 

Auf diese Weise, wenn ich auf die Schaltfläche "Weiter" klicke, wird das nächste Element im Dropdown-Menü ausgewählt.