Selectize.js Как работает getAdjacentOption()?

Question

Я использовал selectize.js, но я немного застрял в использовании getAdjacentValue().

В API одном находит:

getAdjacentOption (значение, направление) `Получает элемент JQuery для предыдущей или следующей опции, по отношению к выделенному параметру. Аргумент «direction» должен быть 1 для «next» или -1 для «previous».

Минимальный рабочий пример, jsFiddle.

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

И .js

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

Но как я могу получить следующее и предыдущее значение текущего выбранного элемента? Я не понимаю, как реализовать помощь API.

Answer 1

Документация по API не очень ясна в отношении аргумента value, который должен быть при вызове getAdjacentOption(value, direction).

Если вы LookUp getAdjacentOption в источнике selectize.js вы найдете

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) : $(); 
}, 

Это говорит нам, что getAdjacentOption использует метод JQuery .index(), который принимает селектор или элемент.

Так что вызов obj.getAdjacentOption(2,1) не может дать ожидаемый результат, потому что вы передаете функцию int в качестве первого аргумента.

Но называть его так, поэтому obj.getAdjacentOption("2",1) тоже не поможет, даже если "2" может быть значением вашей текущей выбранной опции.

Чтобы сделать короткий короткий проход в текущем выбранном элементе.

Вот пример

$(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

Чтобы улучшить то, что сказал DavidDomain, у меня есть кнопка, чтобы перейти к следующему значению в избранном, так что я сделал это:

$('#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 
}); 

Таким образом, когда я нажимаю кнопку «Далее», следующий элемент в раскрывающемся списке устанавливается как выбранный.