动态创建新的选择输入时选择要清空的选择字段

时间:2019-02-07 15:27:28

标签: javascript selectize.js

我的页面上有一些使用Selectize创建的字段

<repeat group="{{ @data['attributes'] }}" value="{{ @attribute }}">
    <div>
        <div class="uk-margin">
            <label>Values</label>
            <input type="text" class="attribute_values" value="{{ implode(', ', @attribute['values']) }}" name="attributes[{{ @key }}][values]">
        </div>
    </div>
</repeat>

使用javascript:

function run_selectize() {
    $('.attribute_values').selectize({
        delimiter: ',',
        persist: false,
        create: function(input) {
            return {
                value: input,
                text: input
            }
        }
    });
}

这可行,但是我试图通过使用Javascript动态创建新的属性集。

var elem = '\
    <div>\
        <div class="uk-margin">\
            <label>Values</label>\
            <input type="text" class="attribute_values" name="attributes[' + key + '][values]">\
        </div>\
    </div>\
';
$('#attributes_body').append(elem);
run_selectize();

这有效,但是,这些新输入需要使用selectize进行初始化。因此,我将拥有的selectize javascript代码放入函数中,以便在添加新的输入字段时可以调用它,但是当页面加载后再次运行该函数时,所有selectize字段都会丢失其所有值。似乎当已初始化的selectize字段再次被初始化时,它将丢失其值。

如何做到这一点,以便仅对这个新添加的字段进行初始化?

我尝试了两种方法,但由于它们不起作用,现在该怎么办。

我试图将run_selectize()函数中的选择器更改为以下内容:

$('.attribute_values:not([class^="selectized"])').selectize({ ...

我也尝试过

$('.attribute_values').not('.selectized').selectize({ ...

我尝试了这些是因为此类在初始化输入后出现在我的输入中,但是这些选择器不起作用。

0 个答案:

没有答案