Select2多选框问题：固定占位符与调整删除按钮位置

针对你提出的两个Select2多选字段的需求，我整理了具体的实现方案，直接看代码和说明：

需求1：始终显示输入框的占位文本“Search items” #

你之前尝试绑定.select2-results__option的click事件没生效，是因为Select2的元素是动态生成的，而且应该使用Select2官方提供的事件来监听选择变化，而不是直接绑定DOM点击事件。另外，默认情况下选中项后占位符会被隐藏，需要通过CSS强制让它始终显示。

修改后的JavaScript代码 #

$(document).ready(function() { 
  // 初始化Select2
  $(".js-example-basic-multiple").select2({ 
    placeholder: "Search items",
    allowClear: true // 可选，添加清空按钮
  }); 

  // 监听Select2的选择和取消选择事件
  $(".js-example-basic-multiple").on("select2:select select2:unselect", function() {
    // 确保搜索框的占位符始终存在
    $(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
  });
});

补充CSS（让占位符始终可见） #

/* 强制占位符始终显示，不被选中项隐藏 */
.select2-selection__placeholder {
  opacity: 1 !important;
  color: #c4c4c4 !important;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 避免占位符干扰输入 */
}

/* 给选中项留出占位符的空间，避免重叠 */
.select2-selection--multiple .select2-selection__rendered {
  padding-left: 80px !important; /* 根据占位符长度调整 */
}

需求2：将选中项（Pill）的删除按钮移至文本右侧 #

通过调整CSS中删除按钮的定位和pill的内边距，就能实现这个效果：

修改后的CSS（针对选中项和删除按钮） #

/* 调整选中项的内边距，给右侧删除按钮留出空间 */
.select2-selection__choice {
  height: 40px;
  line-height: 40px;
  padding-right: 40px !important; /* 增加右侧内边距 */
  padding-left: 16px !important;
  background-color: #CAF1FF !important;
  color: #333 !important;
  border: none !important;
  border-radius: 3px !important;
  position: relative; /* 让删除按钮相对这个元素定位 */
}

/* 将删除按钮移到右侧 */
.select2-selection__choice__remove {
  position: absolute;
  right: 8px; /* 调整右侧距离 */
  left: auto !important; /* 覆盖默认的left定位 */
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  cursor: pointer;
}

/* 鼠标悬停删除按钮时的样式（可选） */
.select2-selection__choice__remove:hover {
  color: #ff4444 !important;
}

完整的代码整合 #

把上面的修改整合到你的代码中，最终的完整代码如下：

HTML #

<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="c3">Item C3</option> <!-- 修正了重复value的问题 -->
  </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>

JavaScript #

$(document).ready(function() { 
  $(".js-example-basic-multiple").select2({ 
    placeholder: "Search items",
    allowClear: true
  }); 

  $(".js-example-basic-multiple").on("select2:select select2:unselect", function() {
    $(".select2-search--inline .select2-search__field").attr("placeholder", "Search items");
  });
});

CSS #

.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; 
  position: relative; /* 为占位符定位做准备 */
} 

.select2-selection--multiple { 
  height: 154px !important; 
  width: 366px !important; 
} 

/* 调整选中项样式 */
.select2-selection__choice {
  height: 40px;
  line-height: 40px;
  padding-right: 40px !important;
  padding-left: 16px !important;
  background-color: #CAF1FF !important;
  color: #333 !important;
  border: none !important;
  border-radius: 3px !important;
  position: relative;
}

/* 移动删除按钮到右侧 */
.select2-selection__choice__remove {
  position: absolute;
  right: 8px;
  left: auto !important;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  cursor: pointer;
}

.select2-selection__choice__remove:hover {
  color: #ff4444 !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); 
  padding-left: 80px !important; /* 给占位符留空间 */
} 

.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 {
  opacity: 1 !important;
  color: #c4c4c4 !important;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

额外说明 #

• 我修正了你HTML中重复的value="c2"问题，把最后一个选项改成了value="c3"，避免选择时出现冲突。
• 占位符使用绝对定位，不会干扰输入框的正常输入，同时通过pointer-events: none确保点击时不会触发占位符的事件。
• 删除按钮的位置可以通过调整right值来微调，选中项的右侧内边距也要对应调整，避免文本和删除按钮重叠。

内容的提问来源于stack exchange，提问作者Dolorosa