Choose an option from the dropdown list using ellipses

I am looking to truncate the dropdown list options with ellipsis, and when clicked on the ellipsis, users should be able to view the full option values.

For instance, the dropdown list currently looks like this:

<select id ="id">
        <option>One - A long text need to be cut off with ellipsis</option>
        <option>Two - A long text need to be cut off with ellipsis</option>
</select>

The desired output is:

One - A long option.... Two - A long option....

When clicking on the ellipses, users should see the full option values, such as: One - A long text need to be cut off with ellipsis

Below is the code I have implemented so far:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
select {
    width:200px;
}
</style>
<script>
$(document).ready(function() {
var maxLength = 20;
    $('#example > option').text(function(i, text) {
    if (text.length > maxLength) {
        return text.substr(0, maxLength) + '...';  
        }
    });
});
</script>
</head>
<body>
<select name="example" id="example">
    <option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
    <option value="">91 Western Road,Brighton PO Box 7169 East Sussex England BN1 2NWL</option>
    <option value="">John Smith,1019 Your Company PO Box 7169 Poole BH15 9EL</option>
</select>
</body>
</html>

I would appreciate any help in achieving the expected result described above.

Answer №1

Here is a unique solution to your issue.

This workaround aims to truncate the selected value and display the entire text when the options are visible, allowing users to read the option values.

$(document).ready(function () {
            $('div.viewport').text($('#example')[0].textContent);
            $('#example').change(function () {
                $('div.viewport').text($("option:selected", this).text());
            });            
        });
 select, .container {
            width: 100px;
            z-index: 2;
            position: relative;
        }

        select {
            color: transparent;
            background: none;
        }

        .container {
            position: relative;
        }

        .viewport {
            position: absolute;
            width: 80%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            font-size: 14px;
            padding: 3px;
        }

        option {
            color: black;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="viewport"></div>
        <select name="example" id="example">
            <option value="">This is some longggggggggggggggggggggggggggggggg text</option>
            <option value="">Short Text</option>
            <option value="">This is some really,really long text text and text</option>
        </select>
    </div>

Answer №2

A snippet of code to customize the display text for title options

$(function(){
              $("select option").attr( "title", "" );
              $("select option").each(function(i){
                this.title = this.text;

              })
            });
            $("select").tooltip({
                left:25
            });

Answer №3

Searching for a cross-browser compatible solution within this space may prove challenging, as styling the select option element is not straightforward. It is advisable to approach this grammatically to ensure safety and consistency across browsers.

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

Avoid being redirected to another page after submitting the form, instead remain on the current page

Unable to understand why this functionality is not working the way it is supposed to... In my ASP.NET MVC5 form, I have two buttons - "Add New Product" which allows users to temporarily save product data (not to the database) and input information on anot ...

How can I remove a row from an MVC webgrid using an ajax call?

Within my MVC Razor view, I have a partial view containing webgrid data. My goal is to include an action link to delete a specific row of data. To accomplish this, I crafted the following JavaScript function: function delMeal(pid) { if (confirm("Do yo ...

New patch request received in Google Sheets, replacing the existing post request

I am transferring 12 cell values from a Google Sheet to a MongoDB database. The purpose behind this action is to merge the 12 cells, perform certain data transformations, and display the output on a frontend interface later on. Moreover, I'm faced wit ...

Tips for utilizing the 'contains' feature within web elements with Java Selenium WebDriver?

In my current project, I am facing a challenge with two specific elements: one is a string formatted as ABC £12,56 and the other is a box called "Cashbox" that should be 15% of the value of the string. However, when attempting to locate the CSS for both e ...

Creating Carousel Images with Rounded Corners using Bootstrap 5

The left corners of the carousel images are rounded, but during the sliding animation, they become pointed again. https://i.sstatic.net/syoPk.png #carouselCoulumn1Neutral { padding-left: 40px; padding-top: auto; padding-right: 20px; paddi ...

What distinguishes the sequence of events when delivering a result versus providing a promise in the .then method?

I've been diving into the world of Promises and I have a question about an example I found on MDN Web Docs which I modified. The original code was a bit surprising, but after some thought, I believe I understood why it behaved that way. The specific ...

Transitioning from container to container-fluid class for tablets using bootstrap

I'm currently utilizing the container class in my project and I'm looking for an elegant way to switch it to container-fluid or adjust the width to resemble container-fluid when the website is viewed on a tablet, so it utilizes the full width of ...

The problem with utilizing the Node `util.inherits` method

I have encountered an issue with a 'this problem' in a Node server. It seems that replacing worker.stuff with worker.stuff.bind(worker) is necessary for it to function correctly. Is there a way to incorporate the bind method into the Worker Clas ...

Issue with switching button and content positioned absolutely

Within this container, I have some content followed by a slide toggle button and then more content. The toggle button utilizes the jQuery function slideToggle. All elements within are positioned absolutely. [Introduction Content] Toggle Button [Hidden C ...

Small jQuery Autocomplete Result Box

I've encountered a peculiar issue with the autocomplete UI that I can't seem to find any information about on here. Check out http://jsfiddle.net/TYPfw/ for the jQuery and HTML, while here is the PHP code: $return_arr = array(); $param = mysql_ ...

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

​Having encountered a tricky situation with CSS and flexbox, I found myself needing to implement the following properties: ​text-overflow: ellipsis; ​white-space: nowrap; ​overflow: hidden; However, when the text was too long, it caused t ...

Transform a date string into a date entity

Collecting the user's input for the date and saving it as a string variable. The format of the value is Fri Aug 27 2021 00:00:00 GMT+0530 (India Standard Time) My goal is to convert this string back into a new Date() object in order to make additiona ...

Struggling to make PayPal Cordova Plugin function properly in both production and sandbox modes

While using the cordova paypal plugin and switching to sandbox mode, I encountered an error. The plugin can be found at https://github.com/paypal/PayPal-Cordova-Plugin https://i.stack.imgur.com/lD2EH.png Running the plugin in PayPalEnvironmentNoNetwork m ...

Searching through the Symfony2 database with the help of Select2 and Ajax

Currently, my FAQ System is running smoothly. However, I am looking to enhance it by adding a search function using Select2. Here's what I have so far: Select2 AJAX Script <script> $("#searchall").select2({ ajax: { ...

A guide on utilizing multer-sftp for downloading files

I've been working on this code, but after searching online I still haven't found a way to download a file from the remote server. I can successfully upload files to the server, but downloading them is posing a challenge. var storage = sftpStorag ...

Convert a file into an empty array when sending a post request from Angular to Laravel

I am currently working on a simple Laravel 5 post request that aims to achieve the following tasks: Save some data to a database. Store a file (image) in public storage with a name consisting of 20 random numbers followed by '.jpg'. Save a URL ...

Having trouble with incorporating multiple sliders on your website using W3.CSS?

I'm in the process of designing a portfolio website and have decided to incorporate modals to showcase my projects. I've opted to use the W3.CSS framework for this purpose. The issue I'm currently facing is that only the first slideshow see ...

Why isn't the jQuery colorbox popup appearing when triggered by the $.ajax() function?

I am currently facing an issue where I am trying to display a hidden colorbox popup using the $.ajax() method's success function, but it is not showing up. Interestingly, this had worked fine in a previous implementation where I used the data attribut ...

How can I access a separate tab in Woocommerce directly from an icon on the single product page?

I am looking to enhance the functionality of a woocommerce single product page by allowing users to click on an icon below the short description. This will then automatically scroll them down to the tab section and open the corresponding tab. Scrolling do ...

Using jQuery to toggle visibility based on scroll position

Recently, I received a web template equipped with a jQuery library called sticky, which essentially makes the navigation "stick" to the top of the page as you scroll. Now, my goal is to integrate a logo into the navigation once it reaches its final positio ...