分别修改select2下拉位置

时间：2018-08-06 03:52:31

标签： jquery html css jquery-select2

我对select2下拉列表有一点问题。我希望他在第一个输入上的下拉位置直接位于占位符下方，并输入最后一行项目。我尝试了此功能：

function selectReposition() {
  var placeholderOffset = $("#first-select2 .select2- search__field").position();
  var newPosition = placeholderOffset.top - 104;
  $(".select2-dropdown").css({"top": newPosition + "px"});
}

但是，它混淆了来自第一输入和第二输入的两个下拉菜单。

我的问题是仅如何重新定位第一个下拉列表？我找不到ID或其他任何可区分从第一个或第二个输入启动的下拉菜单。

另外，我的另一个问题是，我可以这样做，以便将输入的标签放置在输入字段的右侧吗？因此，输入字段留在左侧。

感谢您的帮助！ ：）

$(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');
    }
  });
  
  $("#tag-input .js-example-basic-multiple").select2({
    placeholder: "Add tag"
  }).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', 'Add tag');
    }
  });
});
.select2-selection {
  height: 36px !important; 
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 0 !important;
  border: solid 1px #D1D1D1 !important;
  padding-left: 4px;
}

.select2-selection--multiple {
  height: 160px !important;
}

.select2-selection__choice__remove {
   float: right;
   margin-right: 0;
   margin-left: 2px;
}

.select2-selection__choice {
  height: 40px;
  line-height: 40px;
  padding-right: 12px !important;
  padding-left: 16px !important;
  background-color: #D0F3FF !important;
  color: #333 !important;
  border: none !important;
  border-radius: 3px !important;
}

.select2-search--inline .select2-search__field {
  line-height: 40px;
  color: #333;
  width: 88px !important;
}

.select2-container {
  
}

.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: #D0F3FF !important;
  color: #333 !important;
}

.select2-selection__choice__remove {
  margin-left: 16px;
  font-size: 16px;
}

.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;
}

.select2-results__option {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 24px !important;
  vertical-align: middle !important;
  padding-left: 8px !important;
}

.selectable-dropdown-each {
  display: block; 
  height: 36px;
  line-height: 36px !important;
  padding-right: 0;
  padding-left: 16px;
  cursor: pointer;
}

.selectable-hover {
  background-color: #D0F3FF;
}

.select2-results__option[aria-selected="true"] {
  background-color: #f1f1f1 !important; 
}

.select2-search__field {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  font-size: 13px;
  padding-left: 8px !important;
  border-color: #D1D1D1 !important;
}

.select2-selection__placeholder {
  color: #D1D1D1 !important; 
}

.form-unit .select2-container, .form-unit .select2-selection {
  width: 412px !important;
}

#tag-input .select2-selection--multiple {
  border: none !important;
  height: auto !important;
  padding: 0 !important;
}

#tag-input .select2-selection__rendered {
  padding: 0 !important; 
}

#tag-input .select2-search__field {
  height: 32px;
  border-radius: 16px;
  background-color: #D0F3FF;
  border: none !important;
  padding-left: 16px !important;
  padding-right: 16px;
  width: 104px !important;
}

#tag-input .select2-search__field::placeholder {
  color: #aaa; 
}

#tag-input .select2-search__field:focus {
  border: solid 1px #00c983 !important;
  background-color: #fff;
}

#tag-input .select2-search__field:focus::placeholder {
  color: #d1d1d1;
}

#tag-input .select2-selection__choice {
  height: 32px;
  line-height: 32px;
  border-radius: 16px !important;
}



.form {
  margin-bottom: 40px;
  margin: 0 auto;
  width: 1302px;
  font-family: 'Open Sans', sans-serif;
}

.form-row {
  display: block;
  width: 100%;
  margin: 0 0 32px 0 !important;
}

.form-divided {
  display: inline-block;
}

.form-divided-left {
  margin-right: 32px;
}

.form-divided-right {
  margin-left: -4px;
  width: 412px;
}

.form-input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.form-unit {
  position: relative;
  vertical-align: top;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="form-row">
    <div id="first-select2" class="form-unit form-divided form-divided-left">
      <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="a1">Item C1</option>
        <option value="a2">Item C2</option>
        <option value="b1">Item C3</option>
      </select>
    </div>
    <div id="tag-input" class="form-unit form-divided form-divided-right">
      <label for="emp-id" class="form-input-label">Tag Input</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="a1">Item C1</option>
        <option value="a2">Item C2</option>
        <option value="b1">Item C3</option>
      </select>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

$(".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');
 }
});
$("#tag-input .js-example-basic-multiple").select2({
 placeholder: "Add tag"
}).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', 'Add tag');
  }
 }
 );
});

.select2-selection {
  height: 36px !important; 
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 0 !important;
  border: solid 1px #D1D1D1 !important;
  padding-left: 4px;
}

.select2-selection--multiple {
  height: 160px !important;
}

.select2-selection__choice__remove {
   float: right;
   margin-right: 0;
   margin-left: 2px;
}

.select2-selection__choice {
  height: 40px;
  line-height: 40px;
  padding-right: 12px !important;
  padding-left: 16px !important;
  background-color: #D0F3FF !important;
  color: #333 !important;
  border: none !important;
  border-radius: 3px !important;
}

.select2-search--inline .select2-search__field {
  line-height: 40px;
  color: #333;
  width: 88px !important;
}

.select2-container {

}

.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: #D0F3FF !important;
  color: #333 !important;
}

.select2-selection__choice__remove {
  margin-left: 16px;
  font-size: 16px;
}

.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;
}

.select2-results__option {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 24px !important;
  vertical-align: middle !important;
  padding-left: 8px !important;
}

.selectable-dropdown-each {
  display: block; 
  height: 36px;
  line-height: 36px !important;
  padding-right: 0;
  padding-left: 16px;
  cursor: pointer;
}

.selectable-hover {
  background-color: #D0F3FF;
}

.select2-results__option[aria-selected="true"] {
  background-color: #f1f1f1 !important; 
}

.select2-search__field {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  font-size: 13px;
  padding-left: 8px !important;
  border-color: #D1D1D1 !important;
}

.select2-selection__placeholder {
  color: #D1D1D1 !important; 
}

.form-unit .select2-container, .form-unit .select2-selection {
  width: 412px !important;
}

#tag-input .select2-selection--multiple {
  border: none !important;
  height: auto !important;
  padding: 0 !important;
}

#tag-input .select2-selection__rendered {
  padding: 0 !important; 
}

#tag-input .select2-search__field {
  height: 32px;
  border-radius: 16px;
  background-color: #D0F3FF;
  border: none !important;
  padding-left: 16px !important;
  padding-right: 16px;
  width: 104px !important;
}

#tag-input .select2-search__field::placeholder {
  color: #aaa; 
}

#tag-input .select2-search__field:focus {
  border: solid 1px #00c983 !important;
  background-color: #fff;
}

#tag-input .select2-search__field:focus::placeholder {
  color: #d1d1d1;
}

#tag-input .select2-selection__choice {
  height: 32px;
  line-height: 32px;
  border-radius: 16px !important;
}



.form {
  margin-bottom: 40px;
  margin: 0 auto;
  width: 1302px;
  font-family: 'Open Sans', sans-serif;
}

.form-row {
  display: block;
  width: 100%;
  margin: 0 0 32px 0 !important;
}

.form-divided {
  display: inline-block;
}

.form-divided-left {
  margin-right: 32px;
}

.form-divided-right {
  margin-left: -4px;
  width: 412px;
}

.form-input-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #333;
}

.form-unit {
  position: relative;
  vertical-align: top;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="form-row">
    <div class="form-unit form-divided form-divided-left">
      <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="a1">Item C1</option>
        <option value="a2">Item C2</option>
        <option value="b1">Item C3</option>
      </select>
    </div>
    <div id="tag-input" class="form-unit form-divided form-divided-right">
      <label for="emp-id" class="form-input-label">Tag Input</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="a1">Item C1</option>
        <option value="a2">Item C2</option>
        <option value="b1">Item C3</option>
      </select>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>

0 个答案:

没有答案
相关问题
最新问题