arrangement of columns within the <select> element

Question

arrangement of columns within the <select> element

I have been attempting to create a column layout inside of <select> using CSS, but so far I have been unsuccessful.

https://i.sstatic.net/ltIDl.png

This is the HTML code I have tried:

<select id="select-bill-period">
    <option>Select a bill period</option>
    <option><span>Current bill</span>&nbsp;&nbsp;<span>&pound;21.99</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;<span>Archived</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;&nbsp;<span>Archived</span></option>
    <option><span>20 Oct 2015</span>&nbsp;&nbsp;<span>&pound;45.99</span>&nbsp;&nbsp;&nbsp;<span>Archived</span></option>
</select>

Using   is not a practical solution for me, as we are unable to use <span> or any other tag within the <option> tag. Is there any way to achieve the column structure within the <select> box?

javascript jquery html css

Answer 1

Answer №1

var spacesToAdd = 2;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+''+parts[1]).text;
});

select{
    font-family:"Courier New", Courier, monospace
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<select name="timezones" id="timezones">
    <option value="1">Current bill +21.99</option>
    <option value="2">20Jan 2016 +20.54</option>
     <option value="3">20Dec 2018 +102.65</option>
    <option value="3">20Nov 2016 +502.62</option>
</select>

Answer 2

var spacesToAdd = 2;
var biggestLength = 0;
$("#timezones option").each(function(){
var len = $(this).text().length;
    if(len > biggestLength){
        biggestLength = len;
    }
});
var padLength = biggestLength + spacesToAdd;
$("#timezones option").each(function(){
    var parts = $(this).text().split('+');
    var strLength = parts[0].length;
    for(var x=0; x<(padLength-strLength); x++){
        parts[0] = parts[0]+' '; 
    }
    $(this).text(parts[0].replace(/ /g, '\u00a0')+''+parts[1]).text;
});

select{
    font-family:"Courier New", Courier, monospace
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<select name="timezones" id="timezones">
    <option value="1">Current bill +21.99</option>
    <option value="2">20Jan 2016 +20.54</option>
     <option value="3">20Dec 2018 +102.65</option>
    <option value="3">20Nov 2016 +502.62</option>
</select>

Answer 3

Answer №2

To accomplish this task, utilize jQuery. I came across a jQuery extension that can assist you in developing a solution tailored to your needs. Click on the link provided below for more details:

multi-column selection box

Answer 4

To accomplish this task, utilize jQuery. I came across a jQuery extension that can assist you in developing a solution tailored to your needs. Click on the link provided below for more details:

multi-column selection box

Answer 5

Answer №3

This answer is the result of following my own structure, with a little help from @Roma. I have applied a slightly modified version of the logic and it works perfectly well with the specific font I am using, eliminating the need for

font-family:"Courier New", Courier, monospace

.

$("#select-bill-period option").each(function(){
    var optionText = $(this).text();

    if(optionText.indexOf('+') > -1){ 
        optionText = optionText.split('+'); //if the string contains a + sign, split it into parts;

        //Handling the two-column case
        if(optionText.length == 2){
            var textLength = optionText[0].length - 1;

            for(var i=0; i<textLength; i++){
                optionText[0] = optionText[0]+' '; 
            }

            //Combine the text for the option
            $(this).text(optionText[0].replace(/ /g, '\u00a0')+''+optionText[1]);

        }else{
            var textLength = optionText[0].length - 4;

            for(var i=0; i < textLength; i++){
                optionText[0] = optionText[0]+' '; //Add space after the 1st column
                optionText[1] = optionText[1]+' '; //Add space after the 2nd column                   
            }

            //Merge the text for the option
            $(this).text(optionText[0].replace(/ /g, '\u00a0')+''+ optionText[1].replace(/ /g, '\u00a0')+optionText[2]);
        }

    }else{ 
        $(this).text(optionText); //Keep the text unchanged if there are no changes needed;
    }
});

Answer 6

This answer is the result of following my own structure, with a little help from @Roma. I have applied a slightly modified version of the logic and it works perfectly well with the specific font I am using, eliminating the need for

font-family:"Courier New", Courier, monospace

.

$("#select-bill-period option").each(function(){
    var optionText = $(this).text();

    if(optionText.indexOf('+') > -1){ 
        optionText = optionText.split('+'); //if the string contains a + sign, split it into parts;

        //Handling the two-column case
        if(optionText.length == 2){
            var textLength = optionText[0].length - 1;

            for(var i=0; i<textLength; i++){
                optionText[0] = optionText[0]+' '; 
            }

            //Combine the text for the option
            $(this).text(optionText[0].replace(/ /g, '\u00a0')+''+optionText[1]);

        }else{
            var textLength = optionText[0].length - 4;

            for(var i=0; i < textLength; i++){
                optionText[0] = optionText[0]+' '; //Add space after the 1st column
                optionText[1] = optionText[1]+' '; //Add space after the 2nd column                   
            }

            //Merge the text for the option
            $(this).text(optionText[0].replace(/ /g, '\u00a0')+''+ optionText[1].replace(/ /g, '\u00a0')+optionText[2]);
        }

    }else{ 
        $(this).text(optionText); //Keep the text unchanged if there are no changes needed;
    }
});

arrangement of columns within the <select> element

Answer №1

Answer №2

Answer №3

Similar questions

Guide on triggering an open modal when clicking a link using jQuery

Implementing a JQuery script that triggers every time there is a change in the scroll

Methods to disregard class prefix in css document

What are some tips for improving the smoothness and efficiency of my CSS @keyframes animation on SVG elements specifically in Firefox?

No animated scrolling occurring

By having fadeIn responses triggered by livequery, we can avoid using automated ajax calls with setInterval for fading in

Before the <table> tag, web browsers display a mysterious Phantom <br> tag

What is the best approach to transforming my jQuery function into CSS to ensure responsiveness?

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

Arrange the keys of a map in ascending order, prioritizing special characters and their precedence

When should CSS compression and combining / JS minification be performed - at runtime or during build time?

Utilizing Node.js and Express.js to send AJAX post requests

Creating a dynamic dropdown menu based on a class value using JavaScript in PHP

Mastering the art of incorporating background image transitions and creating a seamless slider for navigation

Having trouble debugging a website remotely? Dealing with a JSON problem specifically in IE8

Switching to AngularJS for an upgrade

Dynamic div with height controlled by the content of the background image

Using the spread operator to modify an array containing objects

Contrast between the functionalities of $.ajax and $.post

Using an AngularJS directive to trigger a function with ng-click