Conceal the chosen selection across various Chosen Select options

Apologies for any language barriers, English is not my first language.

I am looking to upgrade the Chosen Select feature for multiple selected options. When the number of chosen options exceeds the available space in the container, I want them to be hidden with an ellipsis on the last visible option to indicate that there are more options hidden. Something similar to these examples: https://i.sstatic.net/qd3YC.jpg https://i.sstatic.net/WiSLM.jpg

I have managed to hide the overflowing options but I'm struggling to implement the ellipsis on the last visible option.

<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>

Check out this example on jsfiddle

I would greatly appreciate any suggestions or assistance, thank you.

javascripthtmljquerycss

Answer №1

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

// More CSS styling code here...

$('.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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having issues with my countdown timer

Here is some of my JavaScript code: var run; var countdown; var count =14; var curImage = 1; function startAdPage() { run = setInterval("changeAd()"5000); countdown = setInterval("startCountdown()",1000); } function changeAd { switch (curImage) { case 1: ...

javascript

How to make a list with a scroll bar in an HTML table cell

Having trouble creating a scrollable list in a dynamically appended HTML table cell using JavaScript? You're not alone. Even after assigning the list to the cell parent, it seems that the list is not behaving as expected - it's not scrollable and ...

javascriptjqueryhtmlcss

Specify the type attribute in the video element

I am currently utilizing an HTML5 player to stream various video and audio file formats. However, the issue I am facing is that I have to manually specify the type attribute of the video tag for each different format. This has become quite burdensome as I ...

javascripthtmlaudiovideo

Achieving a minimum width while centering a row in Bootstrap

Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div t ...

htmlcsstwitter-bootstrap

Issue with blur event functionality on custom multi-select Vue component not functioning as expected

The blur event seems to be malfunctioning. It works perfectly when I click anywhere within the component, except for when I click on the input field. If I click inside the input field and then outside the component, the blur event fails to trigger, preve ...

javascripthtmlcssvue.js

Creating HTML content with text in AngularJS

I am struggling with rendering a variable containing HTML content in my webpage. Despite setting it up correctly, the variable displays as plain text instead of rendered HTML. Can someone provide assistance with this issue? Here is the snippet of my code: ...

javascriptangularjs

Steps for altering the public folder in a Next.js project

In my monorepo, the structure is as follows: apps/ web/ - next.config.js - pages/ public/ The Next.js application is located in the apps/web/ directory. How can I modify the next.config.js file to instruct it to serve public assets from the root ...

javascriptreactjsnext.jsmonorepo

Automating Web Form Completion with VBA and Selenium

I am experiencing an issue with filling out a form. I have attempted the following methods: driver.FindElementByXPath("//div[@id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "2112345 ...

htmlvbaseleniumselenium-webdriverselenium-chromedriver

How can ThreeJS utilize CSS3Renderer and WebGLRenderer to display two objects in the same scene and achieve overlapping?

JSFiddle : http://jsfiddle.net/ApoG/50y32971/2/ I am working on a project where I am using CSS3Renderer to render an image as a background projected as a cube in the app. However, I also want to incorporate objects rendered using WebGLRenderer in the mid ...

javascriptthree.js

How can I eliminate the appearance of tile seams while applying textures to a mesh?

I am currently working on a project where I am creating a sphere and attaching images to each face of the sphere. My code constructs a sphere with 12 sections horizontally and 6 sections vertically. To properly tile the textures, I set the wrap to repeatin ...

javascriptthree.jswebgl

Utilizing $scope in $compile in Angular: A Comprehensive Guide

Attempting to utilize my scope within a compile... I aim for a scenario where upon clicking a button, a div is generated containing the round number. main.controller('fightController', function($scope, $http, Services, $compile) { $scope.d ...

javascriptangularjs

Guide to dynamically adding a class in VueJS based on a certain condition

I'm in the process of transitioning a project to Vue, and I'm curious about how I can dynamically assign classes to specific elements based on database values rendered with Vue. Previously, I had this code set up without Vue: $(document).ready(f ...

javascriptvue.jsvuejs2vue-component

Tips for duplicating specific div elements

Is there a way to create copies of selected divs within the same panel using a Javascript report designer? I attempted to achieve this by using the following code snippet: function DesignerClone() { $(".ui-selected").each(function () { va ...

javascriptjqueryhtmljquery-uiclone

Folding into itself lies another folding

While attempting to nest a collapse area inside another collapse, I encountered an issue. Upon clicking to open the first collapse, it functions perfectly. However, when trying to open the second collapse (nested within the first one), it inadvertently cl ...

htmlbootstrap-4

Linking 2 webpages with a Get Request, utilizing XML, PUG, and Express

I am a newcomer in the field of Web Development and currently facing a challenge with an exercise assigned to us during our initial week. The task involves importing XML data into a basic Node.JS project. In this exercise, I am required to extract data fr ...

htmlnode.jsxmlexpress

Modernizr - The proper method for integrating polyfills and implementing custom detection techniques

When it comes to incorporating new HTML5 form attributes and input types on a webpage, some browsers support them while others do not. This is why I am looking into using Modernizr - but I am encountering some challenges. From what I understand, Modernizr ...

htmlmodernizrpolyfills

Access the camera feed on a custom webpage using simple authentication

I'm looking to integrate a live camera feed into my website. When I visit the following URL, I can view the camera stream: http://user:pwd@ip/cgi-bin/faststream.jpg?stream=full&html However, when I try to embed the image on my site using the fo ...

jqueryhtmlcamera

Transform the usual button into a jQuery button that requires a press and hold action

Within my code, there are two buttons in play. One button triggers the burger menu, while the second button adjusts the size of a div. I am looking to transform only the second button into a hold button that activates after a 3-second delay. code: $doc ...

javascripthtmljquery

jQuery Dialog Prompt for Form Submission Confirmation

I'm looking for a simple jQuery message box that can display all user input before submitting a form. I am new to jQuery and any assistance is greatly appreciated. Thank you in advance. Below is the form I need help with: <form role="form" ...

jquerymodal-dialogmessagebox

Tips for updating a value within ng-repeat only if the value is equal to "string"; otherwise, hide it from display

I'm having trouble updating the data in my table to display "Yup" or blank space based on certain conditions. I am new to this and tried a solution, but it's not working: {{ person.value ? "Yup":" "}} .. Can anyone help me with this? angular.m ...

javascriptangularjsmean-stack