自定义select2多选

时间：2018-05-16 21:00:24

标签： jquery html css jquery-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; 
}
<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>

1 个答案:

答案 0 :(得分：2)

要在选区上显示占位符：

库在选择时调整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; 
}
<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>

希望这有帮助

相关问题
最新问题