Khkhy Khkhy - 10 days ago 12
HTML Question

How to duplicate select box in selectize?

I need several select boxes on the same page, of type: select-beast Selectize.
I tried to duplicate it by simply copy-paste the entire section of select-beast.
On the page, only the original one, the first select box displayed and works correct. The cloned ones displayed too, but not as they should like the first one. They are not styled, the dropdown works, but text input is disabled.

They are exactly the same HTML code as the first one, but why the original select box displayed correct, ande not the rest? Please help.
Original code for copy-paste:

<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

It's pretty simple :

$('[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>

(see also this Fiddle)

Comments