我有一个列表框容器,每行显示3个项目。
第一项是标签复选框,第二项是Select2保管箱,第三项是弹出窗口的链接。
我的小提琴Fiddle显示从列表框中取出的一行。
几个小时后,我设法在一行上构建了3个项目,但Select2保管箱显示下拉菜单而不是输入框。
如何让Dropbox正常工作?另外,我非常不确定我为每一行构建编码的方式。很高兴知道是否有更有效/更强大的方法。非常感谢任何帮助。
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;
}
答案 0 :(得分:1)
检查小提琴的控制台,你在这里缺少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>