Line Break in HTML Select Option?

Question

Can I have a two line text in an html select option? How?

Skaw

Answer 1

No, browsers don't provide this formatting option.

You could probably fake it with some checkboxes with <label>s, and JS to turn it into a fly out menu.

Tourcoing

Answer 2

I know this is an older post, but I'm leaving this for whomever else comes looking in the future.

You can't format line breaks into an option; however, you can use the title attibute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the full skinny in the title.

<select>
  <option
    title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"
    value="1">1</option>
</select>

Overcareful

It doesn't work on Chrome and Safari. I could only get it to work on Firefox. – Gunnel

It doesn't work on Chrome 104. – Skindive

Answer 3

How about putting the long text in another <option> right below and disabling it? Might be a workaround for someone so posting here.

        <select>
            <option>My real option text</option>
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and my really really long option text that is basically a continuation of previous option)</option> 
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> 
            <option>Another real option text</option>
        </select>

Internuncio

It's mostly a workaround, but for me needs it did the trick. I just added font-size:0.8em to the style to make clear that it is a description for the option above. – Caudell

Answer 4

A bit of a hack, but this gives the effect of a multi-line select, puts in a gray bgcolor for your multi line, and if you select any of the gray text, it selects the first of the grouping. Kinda clever I'd say :) The first option also shows how you can put a title tag in for an option as well.

 function SelectFirst(SelVal) {
   var arrSelVal = SelVal.split(",")
   if (arrSelVal.length > 1) {
     Valuetoselect = arrSelVal[0];
     document.getElementById("select1").value = Valuetoselect;
   }
 }

<select name="select1" id="select1" onchange="SelectFirst(this.value)">
  <option value="1" title="this is my long title for the yes option">Yes</option>
  <option value="2">No</option>
  <option value="2,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for the no option</option>
  <option value="2,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the no option</option>
  <option value="3">Maybe</option>
  <option value="3,1" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is my description for Maybe option</option>
  <option value="3,2" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 2 for the Maybe option</option>
  <option value="3,3" style="background:#eeeeee">&nbsp;&nbsp;&nbsp;This is line 3 for the Maybe option</option>
</select>

Salvage

Doesn't look as good on iOS/Android, but clever indeed! (might be able to add styling to achieve a better effect on mobile). – Everyplace

Answer 5

HTML Code

<section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
</section>

Javascript Code

$(function(){
    $("#testselectset").selectBoxIt({
        theme: "default",
        defaultText: "Make a selection...",
        autoWidth: false
    });
});

CSS Code

.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
    width: 400px; /* Width of the dropdown button */
    border-radius:0;
    max-height:100px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

and you have to add some Jquery Library select Box Jquery CSS

Jquery Ui Min JS

SelectBox Js

Please check this link JsFiddle Link

Muimuir

That's awesome, I searched it a long time – Bereniceberenson

Answer 6

If you're using select2 you can easily build something to fit the dropdown options and selected option likw below:

When your text option is splitted by |

<option value="1">Pacheco|Fmcia Pacheco|11443322551</option>

Then your script could be just like this one:

<script type="text/javascript">
    function formatSearch(item) {
        var selectionText = item.text.split("|");
        var $returnString = $('<span>' + selectionText[0] + '</br><b>' + selectionText[1] + '</b></br>' + selectionText[2] +'</span>');
        return $returnString;
    };
    function formatSelected(item) {
        var selectionText = item.text.split("|");
        var $returnString = $('<span>' + selectionText[0].substring(0, 21) +'</span>');
        return $returnString;
    };
    $('.select2').select2({
        templateResult: formatSearch,
        templateSelection: formatSelected
    });
</script>

The result you can see below:

Gerald

Good answer! Mandou bem, fábio! 👍🏻 – Durkin

@Fábio Great answer. If I am using select2 and have my select box with data setup like you've shown. How exactly do I use your script to make it work with my select box? – Catton

Hi @user1609391, you have to assign your element as a select2 element and define the templateResult and templateSelection. You have it on the "Then your script could be just like this one:" section in the answer above. – Credulous

Answer 7

Just style the select control like this:

<select style="height: 50px; white-space: pre-wrap;">

Result:

Neveda

This works on the selected option, but not on the listed options (i.e., that same option, in the dropdown list, will be truncated at "(o perc" or somewhere near there. – Caruthers

Answer 8

you can use normal input element with list attribute, and then add options with value, the value will be displayed to as a first line and the option text will be displayed as second line automatically. I found this solution, have a look, this way may also help

<label class="m-t-20">Customer List</label>
   <input name="customerlist" class="customerlist form-control" list="customerlists" >
   <datalist id="customerlists">
     <option value="Gerda Weijers">Aw Trucks Limited </option>
     <option value="Tracy Lolesi">Acorn Stoneworx Limited </option>
     <option value="Pacheco">Pacheco Fmcia Pacheco</option>
   </datalist>

but this only works in Chrome, other browsers don't show value text.

Thebault

Answer 9

Does not work fully (the hr line part) on all browsers, but here is the solution:

<select name="selector">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option disabled><hr></option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
</select>

Astomatous

Answer 10

Instead, maybe try replacing the select with markup, e.g.

// Wrap any selects that should be replaced
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>');

// Replace placeholder text with select's initial value
$('.select-replacement-wrapper').each(function() {
	$(this).prepend('<a>' + $('select option:selected', this).text() + '</a>');
});

// Update placeholder text with updated select value
$('select.replace').change(function(event) {
  $(this).siblings('a').text( $('option:selected', this).text() );
});

/* Position relative, so that we can overlay the hidden select */
.select-replacement-wrapper {
  position: relative;
  border: 3px solid red; /* to show area */
  width: 33%;
  margin: 0 auto;
}

/* Only shows if JS is enabled */
.select-replacement-wrapper a {
  /* display: none; */
  /* Notice that we've centered this text - 
   you can do whatever you want, mulitple lines wrap, etc, 
   since this is not a select element' */
  text-align: center;
  display: block;
  border: 1px solid blue;
}

select.replace {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border: 1px solid green;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="dropdown" class="replace">
  <option value="First">First</option>
  <option value="Second" selected>Second, and this is a long line, just to show wrapping</option>
  <option value="Third">Third</option>
</select>

Antoinette

This is a very clever solution. – Kraemer

Answer 11

Ok i found a solution:

HTML:

<div class="styled-select">
    <select class="select-css">
        <option disabled selected></option>
        <option>Apples</option>
        <option>Bananas</option>
        <option>Grapes</option>
        <option>Oranges</option>
    </select>
    <span>How many kg's per week do you expect to be ordering</span>
</div>

CSS:

.styled-select select.select-css {
appearance: none;
   height: 80px;
   pointer-events:all;
   position:absolute;
   top:0;
   left:0;
}
.styled-select {
    position:relative;
    appearance: none;
    overflow: hidden;
    pointer-events:none;
   }

jQuery:

$(".select-css").on("change", function(){
    $(this).next('span').css('display', 'none');
});

Conidium

Answer 12

You can use a library called select2

You also can look at this Stackoverflow Question & Answer

<select id="selectBox" style="width: 500px">
  <option value="1" data-desc="this is my <br> multiple line 1">option 1</option>
  <option value="2" data-desc="this is my <br> multiple line 2">option 2</option>
</select>

In javascript

$(function(){
  $("#selectBox").select2({
    templateResult: formatDesc
  });

  function formatDesc (opt) {
   var optdesc = $(opt.element).attr('data-desc'); 
    var $opt = $(
      '<div><strong>' + opt.text + '</strong></div><div>' + optdesc + '</div>'
    );
    return $opt;
  };
});

Travel

Answer 13

An idea could be to use the optgroup. In my case found it better than the disabled approach. It's less confusing for the user than seeing the disabled option I think.

<select id="q1" v-model="selected" v-on:change="setCPost1(selected)">
  <option value="0"></option>
  <template
    v-for="(child, idx) in getLevel1"
    v-bind:value="child.id"      
  >

  <optgroup v-bind:value="child.id" :key="idx"
  :label="child.label"
  v-if="child.label_line_two"
  >
  </optgroup>

  <option v-bind:value="child.id" :key="idx"  v-if="!child.label_line_two"
  >
  {{ child.label }}  
  </option>

  <option v-bind:value="child.id" :key="idx" v-if="child.label_line_two"
  style="font-style:italic">
  {{ child.label_line_two }}
  </option>


  </template>
</select>

An external component sounds cool like Vue Select, but I wanted to stick with the native html select at the moment.

Protero

Answer 14

yes, by using css styles white-space: pre-wrap; in the .dropdown class of the bootstrap by overriding it. Earlier it is white-space: nowrap; so it makes the dropdown wrapped into one line. pre-wrap makes it as according to the width.

Dario