リストボックスの行内でselect2 dropboxが機能しない

Question

各行に3つの項目が表示されたリストボックスコンテナがあります。

最初の項目はラベルのチェックボックス、2番目はSelect2のドロップボックス、3番目はポップアップへのリンクです。

My Fiddle Fiddleは、リストボックスから取得した単一の行を示しています。

数時間後、私は1つの行に3つの項目を構造化することができましたが、Select2ドロップボックスは入力ボックスの代わりにドロップダウンメニューを表示します。

ドロップボックスを正しく動作させる方法を知りたい場合は、また、私は各行のコーディングを構造化した方法について非常に不確かです。より効率的で堅牢なアプローチがあるかどうかを知ることは良いでしょう。何か助けに感謝します。

https://select2.github.io/select2/select2-3.5.1/select2.js 
https://select2.github.io/select2/select2-3.5.1/select2.css 

<label> 
    <input type="checkbox" name="checkbox" id="First" /> 
    <span class="LHLabelClass">First row LH label:</span> 
</label> 


<span class="MiddleLabelClass"> 
     <select id="multipleSelectExample1" class="tester" data-placeholder="Select type" multiple="multiple"> 
      <option value="Option 1">Option 1</option> 
      <option value="Option 2">Option 2</option> 
      <option value="Option 3">Option 3</option> 
     </select> 
</span> 


<span class="RHLabelClass"> 
<a href="#" id="POPUP1" >First RH row label</a> 
</span> 




$(function() { 
    $("#multipleSelectExample1").select2({}); 
}); 




    * { 
    box-sizing: border-box; 
} 

.LHLabelClass { 
    color: blue; 
    margin-left: 10px; 
    margin-right: 20px; 
    margin-bottom: 30px; 
    width: 150px; 
    display: inline-block; 
    border: 1px solid blue; 
} 

.MiddleLabelClass { 
    width: 100px; 

    margin-right: 30px; 
    display: inline-block; 
    border: 1px solid brown; 
} 

.RHLabelClass { 
    width: 150px; 
    display: inline-block; 
    border: 1px solid green; 
} 

.select2-container-multi .select2-choices { 
    outline:none; 
    width: 224px!important; 
    height: 27px!important; 
    padding: 0px 0px 0px 0px; 
    border: 1px solid transparent; 
} 

.select2-container-multi .select2-choices .select2-search-choice{ 
    outline:none; 
    font-size: 11px; 
    background:#CEDDF0; 
    color: black; 
    padding: 2px 3px 2px 16px!important; 
    margin-top: 5px!important; 
    margin-right: 3px; 
    margin-left: 4px; 
    border: 1px solid #605D9C; 
} 

.select2-drop{ 
outline:none; 
font-size: 12px; 
color: black; 
} 

Answer 1

あなたのフィドルのコンソールをチェックし、あなたはここにjqueryのファイル不足している：多くの@Suchitクマー感謝

$(function() { 
 
    $("#multipleSelectExample").select2({}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/> 
 
<script src="https://select2.github.io/select2/select2-3.5.1/select2.js"></script> 
 

 
<label> 
 
    <input type="checkbox" name="checkbox" id="First" /> 
 
    <span class="LHLabelClass">First row LH label:</span> 
 
</label> 
 
<span class="MiddleLabelClass"> 
 
     <select id="multipleSelectExample" class="tester" data-placeholder="Select type" multiple="multiple"> 
 
      <option value="Option 1">Option 1</option> 
 
      <option value="Option 2">Option 2</option> 
 
      <option value="Option 3">Option 3</option> 
 
     </select> 
 
</span> 
 

 
<span class="RHLabelClass"> 
 
<a href="#" id="POPUP1" >First RH row label</a> 
 
</span>