本文介绍了自定义select2多选的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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="ajax.googleapis/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="cdnjs.cloudflare/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> <link href="cdnjs.cloudflare/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <script src="cdnjs.cloudflare/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="ajax.googleapis/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//code.jquery/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="cdnjs.cloudflare/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> <link href="cdnjs.cloudflare/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" /> <script src="cdnjs.cloudflare/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
希望这会有所帮助
更多推荐
自定义select2多选
发布评论