html - 无法让 select2 保管箱在列表框行中工作

Question

我有一个列表框容器，每行显示 3 个元素。

第一项是标签复选框，第二项是 Select2 下拉框，第三项是指向弹出窗口的链接。

我的 fiddle Fiddle显示取自列表框的单行。

几个小时后，我设法将 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

检查你的 fiddle 的控制台，你在这里缺少 jquery 文件:

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