我一直在使用selectize.js,但是我对使用有点犹豫getAdjacentValue()
。
在API中,您可以找到:
getAdjacentOption(value,direction)`相对于当前突出显示的选项,检索上一个或下一个选项的jQuery元素。“方向”自变量对于“下一个”应为1,对于“上一个”应为-1。
最小的工作示例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帮助。
对于value
调用时参数应该是什么,API文档并不十分清楚getAdjacentOption(value, direction)
。
如果您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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句