自定义select2多选 [英] Customize select2 multi select
问题描述
我正在使用select2创建一个多选择字段,如下所示.
I'm creating a multi select field using select2 as follows.
我想做到这一点,以便即使我已经选择了项目之后,占位符(搜索项目")也总是在该字段中显示.在下拉菜单中选择任何选项后,我尝试使用此方法放置新的占位符:
I want to make it so the placeholder ("Search items") always seen in the field even after I already select items. I tried this to put new placeholder after I select any choice on the dropdown:
$(".select2-results__option").click(function() {
console.log("x");
$(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
});
但是不幸的是,它甚至没有触发控制台日志.
But unfortunately it doesn't even trigger the console log.
我的另一个问题是,我可以这样使文本右侧(而不是左侧)上的药丸上的("x")吗?
My other question is, can I make it so the ("x") on the pills put on the right of the texts instead of on the left?
$(document).ready(function() {
$(".js-example-basic-multiple").select2({
placeholder: "Select items"
});
});
$(".select2-results__option").click(function() {
console.log("x");
$(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
});
.select2-selection {
height: 34px !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
border-radius: 0 !important;
border: solid 1px #c4c4c4 !important;
padding-left: 4px;
}
.select2-selection--multiple {
height: 154px !important;
width: 366px !important;
}
.select2-selection__choice {
height: 40px;
line-height: 40px;
padding-right: 16px !important;
padding-left: 16px !important;
background-color: #CAF1FF !important;
color: #333 !important;
border: none !important;
border-radius: 3px !important;
}
.select2-search--inline .select2-search__field {
line-height: 40px;
color: #333;
}
.select2-container:hover,
.select2-container:focus,
.select2-container:active,
.select2-selection:hover,
.select2-selection:focus,
.select2-selection:active {
outline-color: transparent;
outline-style: none;
}
.select2-results__options li {
display: block;
}
.select2-selection__rendered {
transform: translateY(2px);
}
.select2-selection__arrow {
display: none;
}
.select2-results__option--highlighted {
background-color: #CAF1FF !important;
color: #333 !important;
}
.select2-dropdown {
border-radius: 0 !important;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
border: none !important;
margin-top: 4px !important;
width: 366px !important;
}
.select2-results__option {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 24px !important;
vertical-align: middle !important;
padding-left: 8px !important;
}
.select2-results__option[aria-selected="true"] {
background-color: #eee !important;
}
.select2-search__field {
font-family: 'Open Sans', sans-serif;
color: #333;
font-size: 13px;
padding-left: 8px !important;
border-color: #c4c4c4 !important;
}
.select2-selection__placeholder {
color: #c4c4c4 !important;
}
<div class="form-unit form-divided">
<label for="emp-id" class="form-input-label">Pill Box</label>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="a1">Item A1</option>
<option value="a2">Item A2</option>
<option value="b1">Item B1</option>
<option value="c1">Item C1</option>
<option value="c2">Item C2</option>
<option value="c2">Item C3</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
推荐答案
要在选择项上显示占位符:
库在选择时调整input
元素(带有占位符的元素)的大小.因此,我们需要覆盖它.如何?这是一种方法:
The library resizes the input
element (the one with the placeholder) on selection. So we need to override it. How? Here's one approach:
if($(this).val() && $(this).val().length) {
$(this).next('.select2-container')
.find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items');
}
选择值时,它会从 select2-container 中获取input
元素,并显式添加一个占位符.
On value selection, it fetches the input
element from the select2-container and explicitly adds a placeholder.
要在右侧显示删除"图标:
无论如何,您都有一堆覆盖的CSS,只是在同一行上增加了几行. :)
You anyway have a bunch of overriding CSS, just adding a few more lines to the same. :)
.select2-selection__choice__remove {
float: right;
margin-right: 0;
margin-left: 2px;
}
这是代码段:
$(document).ready(function() {
$(".js-example-basic-multiple").select2({
placeholder: "Select items"
}).on('change', function(e) {
if($(this).val() && $(this).val().length) {
$(this).next('.select2-container')
.find('li.select2-search--inline input.select2-search__field').attr('placeholder', 'Select items');
}
});
});
.select2-selection {
height: 34px !important;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
border-radius: 0 !important;
border: solid 1px #c4c4c4 !important;
padding-left: 4px;
}
.select2-selection--multiple {
height: 154px !important;
width: 366px !important;
}
.select2-selection__choice {
height: 40px;
line-height: 40px;
padding-right: 16px !important;
padding-left: 16px !important;
background-color: #CAF1FF !important;
color: #333 !important;
border: none !important;
border-radius: 3px !important;
}
.select2-selection__choice__remove {
float: right;
margin-right: 0;
margin-left: 2px;
}
.select2-search--inline .select2-search__field {
line-height: 40px;
color: #333;
width: 100%!important;
}
.select2-container:hover,
.select2-container:focus,
.select2-container:active,
.select2-selection:hover,
.select2-selection:focus,
.select2-selection:active {
outline-color: transparent;
outline-style: none;
}
.select2-results__options li {
display: block;
}
.select2-selection__rendered {
transform: translateY(2px);
}
.select2-selection__arrow {
display: none;
}
.select2-results__option--highlighted {
background-color: #CAF1FF !important;
color: #333 !important;
}
.select2-dropdown {
border-radius: 0 !important;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15) !important;
border: none !important;
margin-top: 4px !important;
width: 366px !important;
}
.select2-results__option {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 24px !important;
vertical-align: middle !important;
padding-left: 8px !important;
}
.select2-results__option[aria-selected="true"] {
background-color: #eee !important;
}
.select2-search__field {
font-family: 'Open Sans', sans-serif;
color: #333;
font-size: 13px;
padding-left: 8px !important;
border-color: #c4c4c4 !important;
}
.select2-selection__placeholder {
color: #c4c4c4 !important;
}
<div class="form-unit form-divided">
<label for="emp-id" class="form-input-label">Pill Box</label>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="a1">Item A1</option>
<option value="a2">Item A2</option>
<option value="b1">Item B1</option>
<option value="c1">Item C1</option>
<option value="c2">Item C2</option>
<option value="c2">Item C3</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
希望这会有所帮助
这篇关于自定义select2多选的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!