自定义select2多选
我正在使用select2创建一个多选字段，如下所示。
我想让它成为占位符（“搜索项目”），即使我已经选择了项目，也总是在该字段中看到。 我在下拉列表中选择任何选项后尝试使用此占位符：
$(".select2-results__option").click(function() { console.log("x"); $(document).find(".select2-search--inline .select2-search__field").attr("placeholder", "Search items"); }); 但不幸的是它甚至没有触发控制台日志。
我的另一个问题是，我可以这样做（“x”）放在文本右边而不是左边的药片上吗？
$(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; }
Item A1 Item A2 Item B1 Item C1 Item C2 Item C3
要在选择中显示占位符：
库在选择时调整input元素（带占位符的元素）的大小。 所以我们需要覆盖它。 怎么样？ 这是一种方法：
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元素并显式添加占位符 。
要在右侧显示删除图标：
无论如何，你有一堆重写CSS，只是添加了几行。 🙂
.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; }