[html] Line Break in HTML Select Option?

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

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

        <select>_x000D_
            <option>My real option text</option>_x000D_
            <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> _x000D_
            <option disabled style="font-style:italic">&nbsp;&nbsp;&nbsp;(...and still continuing my previous option)</option> _x000D_
            <option>Another real option text</option>_x000D_
        </select>

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

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

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.

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.

<option value="1" 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!">1</option>

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

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) {_x000D_
   var arrSelVal = SelVal.split(",")_x000D_
   if (arrSelVal.length > 1) {_x000D_
     Valuetoselect = arrSelVal[0];_x000D_
     document.getElementById("select1").value = Valuetoselect;_x000D_
   }_x000D_
 }

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

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:

If you just want a line break in the dropdown list use this:

<option label="" value="" disabled=""> </option>

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

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

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.

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

// Wrap any selects that should be replaced_x000D_
$('select.replace').wrap('<div class="select-replacement-wrapper"></div>');_x000D_
_x000D_
// Replace placeholder text with select's initial value_x000D_
$('.select-replacement-wrapper').each(function() {_x000D_
 $(this).prepend('<a>' + $('select option:selected', this).text() + '</a>');_x000D_
});_x000D_
_x000D_
// Update placeholder text with updated select value_x000D_
$('select.replace').change(function(event) {_x000D_
  $(this).siblings('a').text( $('option:selected', this).text() );_x000D_
});

/* Position relative, so that we can overlay the hidden select */_x000D_
.select-replacement-wrapper {_x000D_
  position: relative;_x000D_
  border: 3px solid red; /* to show area */_x000D_
  width: 33%;_x000D_
  margin: 0 auto;_x000D_
}_x000D_
_x000D_
/* Only shows if JS is enabled */_x000D_
.select-replacement-wrapper a {_x000D_
  /* display: none; */_x000D_
  /* Notice that we've centered this text - _x000D_
   you can do whatever you want, mulitple lines wrap, etc, _x000D_
   since this is not a select element' */_x000D_
  text-align: center;_x000D_
  display: block;_x000D_
  border: 1px solid blue;_x000D_
}_x000D_
_x000D_
select.replace {_x000D_
  position: absolute;_x000D_
  width: 100%;_x000D_
  height: 100%;_x000D_
  top: 0;_x000D_
  border: 1px solid green;_x000D_
  opacity: 0;_x000D_
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
_x000D_
_x000D_
<select id="dropdown" class="replace">_x000D_
  <option value="First">First</option>_x000D_
  <option value="Second" selected>Second, and this is a long line, just to show wrapping</option>_x000D_
  <option value="Third">Third</option>_x000D_
</select>