Selectize.js getAdjacentOption() 是如何工作的？

Question

我一直在使用selectize.js，但我有点卡在getAdjacentValue()的用法上。

在 API 中发现：

getAdjacentOption(value, direction)` Retrieves the jQuery element for the previous or next option, relative to the currently highlighted option. The "direction" argument should be 1 for "next" or -1 for "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 文档对于调用 getAdjacentOption(value, direction).

时 value 参数应该是什么不是很清楚

如果您在 selectize.js 的来源中查找 getAdjacentOption，您会发现

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 所说的，我有一个按钮可以转到 select 中的下一个值，所以我这样做了：

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

这样，当我单击按钮 "Next" 时，下拉列表中的下一项将设置为 selected。

Selectize.js getAdjacentOption() 是如何工作的？

Selectize.js how does getAdjacentOption() work?

javascript

jquery

selectize.js