Seçme kutusunda seçim kutusu nasıl kopyalanır?

Question

Aynı sayfada birkaç seçim kutusuna ihtiyacım var: select-beast Selectize. Seçkin canavarın tüm bölümünü kopyalayıp yapıştırarak kopyalamayı denedim. Sayfada, sadece orijinal olanı, ilk seçim kutusu görüntülenir ve doğru çalışır. Klonlanmış olanlar da gösterildi, ancak ilkini sevmeleri gerektiği gibi değil. Onlar tarz değil, açılan işler, ancak metin girişi devre dışı bırakıldı.

Birincisi ile tamamen aynı HTML kodudur, ancak orijinal seçme kutusunun neden doğru görüntülendiğini ve geri kalanı neden dinlemediğinizi? Lütfen yardım et. kopyala-yapıştır için Orijinal kod:

<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

Oldukça basit:

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

(ayrıca this Fiddle bakınız)