如何在selectize.js中设置所选选项的值

Question

我正在尝试设置selectize.js中要选择的选项，该如何实现。

有一些初始设置的选项。那么如何设置值呢？

 <select id="selectize">
   </select>
var options=[
    {value:0, text:"option 0"},
    {value:1, text:"option 1"},
    {value:2, text:"option 2"},
    {value:3, text:"option 3"},
];


$('#selectize').selectize({
    "options":options
});

$('#selectize').change(function(){
//$('#result').html("you select value="+$(this).val());
        $('#selectize').val(1);

});

请在 jsfiddle 中查找代码。 http://jsfiddle.net/rcun9zmf/ 谢谢。

- user3929758

Answer 1

要设置所选选项，如果selectize是下拉菜单并且您想将其用作选择下拉菜单，则需要使用setValue。假设您已经有了预先选择的值，并且selectize组件已经构建并加载了所有值。

如果您想动态更改值

var idPreselected = 2;
var $select = $('#MySelectizeDropdown').selectize();
var control = $select[0].selectize;
control.setValue(idPreselected);   

- Marianela Diaz

---

真是太折磨人了。我要放弃select2.js（因为主题）。至少他们的代码有点简单：$("#element").select2().val("TheVal")我期望像这样简单的代码： $("#editGenre").selectize().val("Country") - Will Belden

Answer 2

你需要首先选择你的selectize，使用input[0].selectize，然后使用selectize的本地方法getValue()。根据你的fiddle，这应该可以工作:

var options=[
    {value:0, text:"option 0"},
    {value:1, text:"option 1"},
    {value:2, text:"option 2"},
    {value:3, text:"option 3"},
];
$('#selectize').selectize({
    "options":options
});

$('#selectize').change(function(){
    var selectize = $("#selectize")[0].selectize;
    $('#result').html("you select value="+ selectize.getValue());
});

{{链接1：JsFiddle}}

- Deh

Answer 3

使用addItem方法为您的selectize控件设置初始值。

var selectField = $('#yourfield');
if (selectField.length > 0) {
  var selectField = $('#yourfield')[0].selectize;
  selectField.addItem(IDTOSET, false);
}

https://jsfiddle.net/3aapx1m1/

- Matthew Townsen

Answer 4

好的，关于其他解决方案的评论让人感到很烦恼。看起来selectize更喜欢使用常规DOM而不是jQuery，这实际上是一件好事，考虑到最近对Vanilla JS的转向。

所以，这里有一个更好的解决方案。只要记住没有检查元素是否找到。我相信你可以理解这一点。(对于批评者，OP中没有关于jQuery的内容。)

document.getElementById("editGenre").selectize.setValue("Rock");

- Will Belden

Answer 5

你可以通过四个简单的步骤来实现这一点：

var val= "abc";
$("#txtbox").selectize()[0].selectize.destroy();
$('#txtbox').val(val);
$('#txtbox').selectize({
    plugins: ['remove_button', 'restore_on_backspace'],
    persist: false,
    //  createOnBlur: true,
    create: true,
    onItemAdd: function () {
        this.close();
    }
});

- GUNJAN ASWANI