如何在 selectize 中复制 select 框？

Question

我需要在同一页上放置多个 select 框，类型为：select-beast Selectize。我试图通过简单地复制粘贴 select-beast 的整个部分来复制它。在页面上，只有原始的第一个 select 框显示并且工作正常。克隆的也显示出来，但不像第一个那样。它们没有样式，下拉菜单有效，但文本输入被禁用。

它们与第一个 HTML 代码完全相同，但为什么原来的 select 框显示正确，而其余的不正确？请帮忙。复制粘贴的原始代码：

<div id="wrapper">
    <h1>Selectize.js</h1>
    <div class="demo">
        <h2>&lt;select&gt;</h2>
        <div class="control-group">
            <label for="select-beast">Beast:</label>
            <select id="select-beast" class="demo-default" placeholder="Select a person...">
                <option value="">Select a person...</option>
                <option value="4">Thomas Edison</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
            </select>
        </div>

        <script>
            $('#select-beast').selectize({
                create: true,
                sortField: {
                    field: 'text',
                    direction: 'asc'
                },
                dropdownParent: 'body'
            });
        </script>
    </div>
</div>

Answer 1

很简单:

$('[id^=select-beast]').selectize({
    create: true,
    sortField: {
        field: 'text',
        direction: 'asc'
    },
    dropdownParent: 'body'
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.css"/>
<div id="wrapper">
    <div class="demo">
        <h2>&lt;select&gt; #1</h2>
        <div class="control-group">
            <label for="select-beast">Beast:</label>
            <select id="select-beast" class="demo-default" placeholder="Select a person...">
                <option value="">Select a person...</option>
                <option value="4">Thomas Edison</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
            </select>
        </div>
        <h2>&lt;select&gt; #2</h2>
        <div class="control-group">
            <label for="select-beast2">Country:</label>
            <select id="select-beast2" class="demo-default" placeholder="Select a country...">
                <option value="">Select a country...</option>
                <option value="BE">Belgium</option>
                <option value="NL">Netherlands</option>
                <option value="FR">France</option>
            </select>
        </div>
    </div>
</div>

（另见 this Fiddle）

如何在 selectize 中复制 select 框？

How to duplicate select box in selectize?

html

javascript

jquery

selectize.js