Selectize.js getAdjacentOption()은 어떻게 작동합니까?

Question

selectize.js를 사용하고 있지만, getAdjacentValue()의 사용법에 조금 갇혀 있습니다. API가 하나에서

는 발견 :

getAdjacentOption (값, 방향)`현재 선택된 옵션을 기준으로 이전 또는 다음 옵션에 대한 jQuery를 요소를 가져옵니다. "direction"인수는 "next"에 대해 1이거나 "previous"에 대해 -1이어야합니다.

최소 작업 예제, jsFiddle.

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

그리고는

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

된 .js하지만 어떻게 내가 현재 선택된 항목의 다음 및 이전 값을받을 수 있나요? API 도움말을 구현하는 방법을 알지 못합니다.

Answer 1

getAdjacentOption(value, direction)을 호출 할 때 value 인수가 무엇인지에 대한 API 설명서가 명확하지 않습니다. 당신이 selectize.js의 소스에 getAdjacentOption를 조회하는 경우

당신이 getAdjacentOption가 선택 또는 요소를 받아들이는 jQuery를 .index() 방법을 사용합니다 것을 우리에게 말하고있다

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

찾을 수 있습니다.

따라서 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 
}); 

을

이렇게하면 "다음"버튼을 클릭하면 드롭 다운의 다음 항목이 선택 항목으로 설정됩니다.