Question

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

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

<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）

如何在选择中复制选择框？

1 个答案: