代码之家  ›  专栏  ›  技术社区  ›  Dolorosa

单独修改select2下拉位置

  •  0
  • Dolorosa  · 技术社区  · 6 年前

    我对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 回复  |  直到 6 年前