Hide the selected option in multiple Chosen Select

user_12878004 0
Viewed 159

Sorry for my English, this isn't my native language.

I have to upgrade Chosen Select multiple selected options. If the length of chosen options is more than length of container, chosen options have to be hidden. And the last visible chosen options must be shorten with ellipsis to show there are more options inside. Something like this one: enter image description here enter image description here

I hide the options but literally have no idea how make the ellipsis on the last visible element in this case.

<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

I'd appreciate any ideas or thoughts, thank you.

css html jquery javascript
1 Answers

Solution fort of

<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

user_128780040
Related