Question

我有一个表单，我想从中将一些默认值复制到输入中。表单输入使用selectize.js插件。我想以编程方式设置一些表单值。这样做的标准方法是：

$("#my_input").val("My Default Value");

不起作用。

我尝试过类似的东西，但它也不起作用。

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
selectize.setValue("My Default Value");

有什么想法吗？这很简单:)我很想念它。

Answer 1

检查 API Docs

方法addOption(data)和setValue(value)可能就是您要找的。

更新：看到此答案的受欢迎程度，这里有一些基于评论/请求的其他信息......

setValue(value, silent)
将所选项目重置为给定值   如果“沉默”是真实的（即：true，1），则不会对原始输入触发更改事件。

addOption(data)
添加可用选项或选项数组。如果它已经存在，则不会发生任何事情。
注意：这不会刷新选项列表下拉列表（使用refreshOptions()）。

响应被覆盖的选项：
这可以通过重新初始化选择而不使用您最初提供的选项来实现。如果您不打算重新创建元素，只需将选择对象存储到变量：

// 1. Only set the below variables once (ideally)
var $select = $('select').selectize(options);  // This initializes the selectize control
var selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')

// 2. Access the selectize object with methods later, for ex:
selectize.addOption(data);
selectize.setValue('something', false);


// Side note:
// You can set a variable to the previous options with
var old_options = selectize.settings;
// If you intend on calling $('select').selectize(old_options) or something

Answer 2

这对我有用：

$('select').each(function (idx) {
    var selectizeInput = $(this).selectize(options);
    $(this).data('selectize', selectizeInput[0].selectize);
});

但你必须非常确定你只有一场比赛。

更新：由于此解决方案非常完美，为了使其工作正常，即使页面上有多个选择元素，我也更新了答案：

我们可以按照以下方式进行初始化：

var selectElement = $('#unique_selector').eq(0);
var selectize = selectElement.data('selectize');
if (!!selectize) selectize.setValue("My Default Value");

在初始化后以实际方式设置值：

android:windowBackground

Answer 3

用户回答“只有空白”＃39;是正确的。除此之外的一小部分 - 如果需要，您可以设置多个默认值。

不是将id传递给setValue（），而是传递一个数组。例如：

var $select = $("#my_input").selectize();
var selectize = $select[0].selectize;
var yourDefaultIds = [1,2]; # find the ids using search as shown by the user onlyblank
selectize.setValue(defaultValueIds);

Answer 4

以下是使用远程搜索标记的完整代码。希望这有用。

$('#myInput').selectize({
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: [],
delimiter: ',',
persist: false,
create: false,
load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
        url: '/api/all_cities.php',
        type: 'GET',
        dataType: 'json',
        data: {
            name: query,
        },
        error: function() {
            callback();
        },
        success: function(res) {
            callback(res);
        }
    });
},
onInitialize: function(){
    var selectize = this;
    $.get("/api/selected_cities.php", function( data ) {
        selectize.addOption(data); // This is will add to option
        var selected_items = [];
        $.each(data, function( i, obj) {
            selected_items.push(obj.id);
        });
        selectize.setValue(selected_items); //this will set option values as default
    });
}
});

Answer 5

注意 setValue 仅在选择控件的预定义值集（例如选择字段）时才有效，对于值可能是动态的控件（例如，用户可以在飞，文本框字段） setValue 不起作用。

使用 createItem 功能代替添加和设置选择字段的当前值

离。

$selectize[ 0 ].selectize.clear(); // Clear existing entries
for ( var i = 0 ; i < data_source.length ; i++ ) // data_source is a dynamic source of data
    $selectize[ 0 ].selectize.createItem( data_source[ i ] , false ); // false means don't trigger dropdown

Answer 6

刚遇到同样的问题并用以下代码解决了这个问题：

selectize.addOption({text: "My Default Value", value: "My Default Value"});
selectize.setValue("My Default Value");

Answer 7

我遇到了同样的问题 - 我正在使用Selectize和Rails并希望选择一个关联字段 - 我希望关联记录的名称显示在下拉列表中，但我需要每个选项的值为记录的ID，因为Rails使用value来设置关联。

我通过将@valueAttr的coffeescript var设置为每个对象的id并将@dataAttr变量设置为记录的name来解决此问题。然后我浏览了每个选项并设置：

 opts.labelField = @dataAttr
 opts.valueField = @valueAttr

有助于查看完整差异：https://github.com/18F/C2/pull/912/files

Answer 8

我有类似的问题。我的数据由远程服务器提供。我希望在选择框中输入一些值，但事先并不确定该值是否是服务器上的有效值。

所以我希望在框中输入值，并且我希望选择显示可能的选项，就像用户输入了值一样。

我最终使用了这个hack（它可能不受支持）：

var $selectize = $("#my_input").selectize(/* settings with load*/);
var selectize = $select[0].selectize;
// get the search from the remote server
selectize.onSearchChange('my value');
// enter the input in the input field
$selectize.parent().find('input').val('my value');
// focus on the input field, to make the options visible
$selectize.parent().find('input').focus();

Answer 9

一个简化的答案：

$('#my_input').data('selectize').setValue("Option Value Here");

Answer 10

首先加载选择下拉菜单然后选择它。它将与普通的$（select）.val（）一起使用。

Answer 11

var $select = $(document.getElementById("selectTagName"));
var selectize = $select[0].selectize;
selectize.setValue(selectize.search("My Default Value").items[0]);

如何设置selectize.js输入的值？

11 个答案: