隐藏多个Chosen Select中的选定选项答案

【问题标题】：Hide the selected option in multiple Chosen Select隐藏多个Chosen Select中的选定选项
【发布时间】：2021-02-02 10:25:20
【问题描述】：

对不起，我的英语不是我的母语。

我必须升级选择多个选定的选项。如果所选选项的长度大于容器的长度，则必须隐藏所选选项。最后一个可见的选项必须用省略号缩短，以显示里面有更多的选项。像这样的东西：

我隐藏了选项，但实际上不知道在这种情况下如何在最后一个可见元素上制作省略号。

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
  </select>
</div>

Example jsfiddle

如果有任何想法或想法，我将不胜感激，谢谢。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

解决方案

<script
src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <select data-placeholder="Choose a Country..."
    class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
  </select>
</div>

html .chosen-container.chosen-container-single {
  width: 210px !important;
  font-size: 17px;
  vertical-align: top;
}


html .chosen-container.chosen-container-single a {
  border-radius: 5px;
  border: 1px solid #dfe4ec;
  height: 35px;
  padding-left: 10px;
  box-shadow: none;
  background: white;

}

html .chosen-container.chosen-container-single a span {
  line-height: 35px;
}

html .chosen-container-single .chosen-search input[type="text"] {
  border: 1px solid #d5dfe1;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  margin: 1px 0;
  padding: 4px 20px 4px 4px;
  width: 100%;
}

html .chosen-container .chosen-drop {
  border: 1px solid #d5dfe1;
}

html .chosen-container .chosen-results li {
  line-height: 1.42857143;
}

html .chosen-container-single .chosen-single div b {
  background-size: contain;
  width: 18px;
  background-repeat: no-repeat;
  background-position-y: 8px;
}

html .chosen-container-single .chosen-single div {
  width: 30px;
}

html .chosen-container-single .chosen-single span {
  margin-right: 30px;
}

html .chosen-container.chosen-container-multi {
  width: 100% !important;
  font-size: 17px;
}

html .chosen-container-multi ul.chosen-choices {
  border-radius: 5px;
  border: 1px solid #dfe4ec;
  min-height: 35px;
  padding-left: 0px;
  box-shadow: none;
  background: -moz-linear-gradient(top,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -webkit-linear-gradient(top,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -o-linear-gradient(top,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -ms-linear-gradient(top,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: linear-gradient(to bottom,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
}

html .chosen-container-multi .chosen-choices li.search-field {
  line-height: 35px;
}

html .chosen-container-multi .chosen-choices li.search-choice {
  margin: 0px;
  height: 35px;
  border: none;
  background: -moz-linear-gradient(bottom,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -webkit-linear-gradient(bottom,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -o-linear-gradient(bottom,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: -ms-linear-gradient(bottom,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  background: linear-gradient(to top,
  rgba(255, 255, 255, 1) 0%, rgba(243, 246, 248, 1) 100%);
  border-radius: 0px;
  padding: 10px 40px 10px 15px;
  border-right: 1px solid #dfe4ec;
}

html .chosen-container.chosen-container-multi .chosen-choices li.search-field input {
  padding-left: 10px;
}

html .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 10px;
  right: 13px;
  display: block;
  width: 15px;
}

.chosen-container.chosen-container-multi ul.chosen-choices::after {
  content: '';
  background: url(data:image/png;base64,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);
  background-size: contain;
  width: 18px;
  background-repeat: no-repeat;
  background-position-y: 8px;
  display: block;
  height: 30px;
  right: 10px;
  position: absolute;
  top: 5px;
}

html .chosen-container.chosen-container-multi {
  width: 320px !important;
  margin-right: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

html .chosen-container.chosen-container-multi {
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #dfe4ec;
}

html .chosen-container.chosen-container-multi:hover {
  overflow: visible;
  border: none;
}

html .chosen-container-multi ul.chosen-choices {
  border: none !important;
}

html .chosen-container.chosen-container-multi:hover ul.chosen-choices {
  border: 1px solid #dfe4ec !important;
  min-height: 35px !important;
}

html .chosen-container-multi .chosen-choices {
  padding-right: 27px !important;
}

html .chosen-container.chosen-container-multi {
    margin-top: 0 !important;
    height: 35px;
    margin-right: 22px;
    height: 35px;
}

html .chosen-container.chosen-container-multi:hover ul.chosen-choices {
    border: 1px solid #dfe4ec !important;
    min-height: 35px !important;
}

$('.chosen-select').chosen();

let chosenContainerMore = function(chosenChoises) {
  let choiseSelectnHeight = chosenChoises.height();
  console.log(choiseSelectnHeight);
  if (choiseSelectnHeight > 35) {
    chosenChoises.addClass("more");
  } else {
    chosenChoises.removeClass("more")
  }

}
$('body').change(function() {
  let tagChosen = $(".chosen-choices");
  chosenContainerMore(tagChosen);
});

Working jsfiddle

【讨论】：