添加项目以选择选择

时间:2017-11-29 12:31:09

标签: javascript selectize.js

我是全新的javascript,我有一个关于slectize库的问题。如何添加要列出的内容并将其选中?

{% block head %}
<link rel="stylesheet" href="{% static 'plugins/selectize/dist/css/selectize.default.css' %}">
<script type="text/javascript" src="{% static 'plugins/selectize/dist/js/standalone/selectize.js' %}"></script>

<script type="text/javascript">
    $(function() {

    var options=[
        {value:0, text:"option 0"},
        {value:1, text:"option 1"},
        {value:2, text:"option 2"},
        {value:3, text:"option 3"},
    ];

        $('show_something').selectize({
        plugins: ['remove_button', 'restore_on_backspace'],
        options: 'options'
        });
    });
</script>
{% endblock %}

{% block content %}
<form method="post">
<label>whatever
    <show_something></show_something>
</label>

我无能为力。我默认选择option 0option 1,并且可以选择option 2option 3

我找不到任何有关如何做到这一点的信息。

1 个答案:

答案 0 :(得分:0)

好的,我现在知道了:P半小时用Google搜索更多:P

{% block head %}
<link rel="stylesheet" href="{% static 
'plugins/selectize/dist/css/selectize.default.css' %}">
<script type="text/javascript" src="{% static 
'plugins/selectize/dist/js/standalone/selectize.js' %}"></script>

<script type="text/javascript">
    $(function() {

var options1=[{
                value: 0,
                title: 'option 0',
            }, {
                value: 1,
                title: 'option 1',
            }, {
                value: 2,
                title: 'option 2',
            }, {
                value: 3,
                title: 'option 2',
        }];

    $('#show_something').selectize({
            plugins: ['remove_button', 'restore_on_backspace'],
            maxItems: null,
            valueField: 'value',
            labelField: 'title',
            searchField: 'title',
            options: options1,
            create: false
        });
});
</script>
{% endblock %}

{% block content %}
<form method="post">
<selectize id="show_something" multiple="multiple" placeholder="whatever" 
style="width:100px; height:25px;" class="selectized"></selectize>
</form>