Limiting options after user chooses option (HTML) - html

As of right now, I have two lists of options to choose from for a form in HTML. However, choosing a value in one list would make certain options in the second list impossible. Specifically, the first list is a list of possible units (cm, in, ft.), while the second is a list of locations. Choosing a unit would limit the number of possible locations that would have this unit. Similarly, choosing a country value would limit the number of units that are available. Would it be possible in any way to limit the choices available to the user after they select either a location or a unit?
Unit:
<br>
<select name="unit_input">
<br>
<option selected disabled hidden></option>
<option value="l">League</option>
<option value="m">Mile</option>
<option value="ft">Foot</option>
<option value='m'>Meter</option>
<option value="st">Stage</option>
<option value="km">Kilometer</option>
</select>
<br>
Location:
<br>
<select name="nationality_input">
<br>
<option selected disabled hidden></option>
<option value="italian">Italian</option>
<option value="german">German</option>
<option value="french">French</option>
<option value="hungarian">Hungarian</option>
<option value="british">British</option>
<option value="swiss">Swiss</option>
<option value="spanish">Spanish</option>
</select>
<br>
<br>

Yes, using JavaScript: https://codepen.io/dpamonty/pen/PoqRZQd
(Don't forget to add ID to your drop-down list for the code to work).
<!doctype html>
<html>
<head>
</head>
<body>
Unit:
<br>
<select id="unit_input" name="unit_input" onchange="restrictDropDownLists()">
<br>
<option selected disabled hidden></option>
<option value="l">League</option>
<option value="m">Mile</option>
<option value="ft">Foot</option>
<option value='m'>Meter</option>
<option value="st">Stage</option>
<option value="km">Kilometer</option>
</select>
<br>
<br>
<br>
Location:
<br>
<select id="nationality_input" name="nationality_input" onchange="restrictDropDownLists()">
<br>
<option selected disabled hidden></option>
<option value="italian">Italian</option>
<option value="german">German</option>
<option value="french">French</option>
<option value="hungarian">Hungarian</option>
<option value="british">British</option>
<option value="swiss">Swiss</option>
<option value="spanish">Spanish</option>
</select>
<br>
<br>
<script type="text/javascript">
function restrictDropDownLists(){
var unit = document.getElementById("unit_input");
var nationalilty = document.getElementById("nationality_input");
switch(unit.value){
case "m":
// Options to hide:
nationalilty.options[1].style.display = "none"; // Italian
// etc.
// Options to show:
nationalilty.options[4].style.display = ""; // British
// etc.
break;
// etc.
}
switch(nationalilty.value){
case "british":
// Options to hide:
unit.options[6].style.display = "none"; // Kilometer
// etc.
// Options to show:
unit.options[1].style.display = ""; // League
// etc.
// etc.
}
}
// Restrict on the page load as well:
restrictDropDownLists();
</script>
</body>
</html>

Theoretically you should be able to do this with pure CSS with something like:
#second option { display: none; }
#first:has(> option#a:checked) ~ #second option.a { display: block; }
#first:has(> option#b:checked) ~ #second option.b { display: block; }
#first:has(> option#c:checked) ~ #second option.c { display: block; }
<select id="first">
<option id="a">a</option>
<option id="b">b</option>
<option id="c">c</option>
</select>
<select id="second">
<option class="a b c">Shown for all options</option>
<option class="a">Shown when a selected</option>
<option class="c">Shown when c selected</option>
</select>
However, nothing supports :has() yet. With a change of implementation, you can do something similar in pure CSS. Although, it is far far better to go the JavaScript route; as the following has a number of caveats:
label:after { content: ''; display: block; }
input[name=second] { display: none; }
input[name=second] + label { display: none; }
#a:checked ~ input[name=second].a { display: inline; }
#a:checked ~ input[name=second].a + label { display: inline; }
#b:checked ~ input[name=second].b { display: inline; }
#b:checked ~ input[name=second].b + label { display: inline; }
#c:checked ~ input[name=second].c { display: inline; }
#c:checked ~ input[name=second].c + label { display: inline; }
<h4>First</h4>
<input id="a" type="radio" name="first" /><label>A</label>
<input id="b" type="radio" name="first" /><label>B</label>
<input id="c" type="radio" name="first" /><label>C</label>
<h4>Second</h4>
<input id="d" type="radio" name="second" class="a b c" /><label>Shown for all options</label>
<input id="e" type="radio" name="second" class="a" /><label>Shown when a is selected</label>
<input id="f" type="radio" name="second" class="c" /><label>Shown when c is selected</label>
The major issue with the above is that in order to rely on the ~ selector, all the inputs have to be a sibling. So this greatly impacts your layout, and what you can actually achieve. Once :has() is supported, pure CSS options will exist, but even then you typically want more logical handling than CSS can offer i.e. how do you allow a user to leave and return to the same point in the form? Or, what happens to selected option's value when it disappears? This is where JavaScript will definitely win out.
Forms are a perfect example of how building a UI (user interface) based upon a state tree is a good idea. This tends to be the focus of frameworks like React, or Vue. Where, depending on the current "state" (an object tree that describes chosen options) the UI just "reacts" and hides/shows conditional elements. To read about this from a pure "state" perspective, looking into Redux or similar technologies as a basis for what you are building could be good idea.

Related

Is it possible to use combinators with select > option elements? [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I want to make the text input appear/disappear using select dropdown menu. When the option with value '4' is selected, the text input below should display:block. The code is as follows:
HTML
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>
CSS
.test {
display: none;
}
.parent option[value="4"]:checked ~ .parent > input.test {
display: block;
}
Is it possible or I have been barking under the wrong tree for hours? At the moment JS is not an option. Thanks!
I guess it's not possible without JS at all, but you can achieve your goal with simple Element dataset onchange trick:
select ~ input {
display: none;
}
select[data-chosen='4'] ~ input {
display: inline-block;
}
<div class="parent">
<label for="title">Movie</label>
<select name="title" id="title" onchange="this.dataset.chosen = this.value">
<option value="1" selected>Robocop</option>
<option value="2">Terminator</option>
<option value="3">The Professional</option>
<option value="4">Home Alone</option>
<option value="5">Back to the Future</option>
<option value="6">Forrest Gump</option>
<option value="7">The Notebook</option>
<option value="8">The Good, The Bad, and The Ugly</option>
<option value="9">The Mask</option>
</select>
<input class="test" type="text">
</div>

Why is it that if you target a "Form" element in CSS, the properties apply only to the first child-element, and not all?

Here's what I mean.
<div class="drop-down">
<form action="/action-page.php">
<label for="cars">Choose a Japanese car:</label>
<select id="cars" name="cars">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Suzuki">Suzuki</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
<option value="Mazda">Mazda</option>
</select>
<input type="submit">
</form>
</div>
and CSS:
.drop-down {
background-color:white;
padding:20px;
display:inline-block;
padding-right:70px;
padding-left:70px;
font-size:20px;
}
Now, the font-size applies to only the first child-element, which is the label element. Why is it that it doesn't apply to the rest of the child-elements, i.e. the select and input?
I have to separately target them to change their font-size. I thought that, if I target the parent element, the changes are going to cascade down to all the texts within the parent element, yet it only cascades down to the first child element.
Why is that?
Browser has it's own stylesheet (called user agent stylesheet).
If you inspect your input and select elements, you would see that browser overrides your style, since it has higher specificity:
Simply adding
input, select{
font-size: inherit;
}
solves the problem.
It would be good idea to add css reboot like this or write your own in separate file. That would solve common problems and make styles less browser-opinionated.
You can do it by defining a separate CSS for select.
select {
font-size:20px;
}
if you want the same style for both you can add it in style like .drop-down, select {} but it will make it worse as there is padding in your style for the label. it will be applied to the options also this will make your dropdown larger.
.drop-down {
background-color:white;
padding:20px;
display:inline-block;
padding-right:70px;
padding-left:70px;
font-size:20px;
}
select {
font-size:20px;
}
<div class="drop-down">
<form action="/action-page.php">
<label for="cars">Choose a Japanese car:</label>
<select id="cars" name="cars">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Suzuki">Suzuki</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
<option value="Mazda">Mazda</option>
</select>
<input type="submit">
</form>
</div>

Is there possibility to break line in select? [duplicate]

Can I have a two line text in an html select option? How?
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>
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"> (...and my really really long option text that is basically a continuation of previous option)</option>
<option disabled style="font-style:italic"> (...and still continuing my previous option)</option>
<option>Another real option text</option>
</select>
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.
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"> This is my description for the no option</option>
<option value="2,2" style="background:#eeeeee"> This is line 2 for the no option</option>
<option value="3">Maybe</option>
<option value="3,1" style="background:#eeeeee"> This is my description for Maybe option</option>
<option value="3,2" style="background:#eeeeee"> This is line 2 for the Maybe option</option>
<option value="3,3" style="background:#eeeeee"> This is line 3 for the Maybe option</option>
</select>
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
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:
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.
Just style the select control like this:
<select style="height: 50px; white-space: pre-wrap;">
Result:
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>
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>
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;
};
});
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.
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.

Change color of a hidden select option

I've got this:
<select style="font-size: 20" id="subject" name="subject">
<option hidden value="hello">I just want to say hello =]</option>
<option value="quote">I'd like a quote</option>
<option value="general">General</option>
</select>
Works so far, but i'd like the hello option to be gray as selected (like placeholders in textareas)
if i do this:
<select style="font-size: 20" id="subject" name="subject">
<option hidden style="color:gray" value="hello">I just want to say hello =]</option>
<option value="quote">I'd like a quote</option>
<option value="general">General</option>
</select>
It only changes the color of "hello" when dropped down, and not in the actual select element
Is this what you mean? This will make the selected option be grey.
select {
color: grey;
}
option:not(:checked) {
color: black; /* or whatever your default style is */
}
http://jsfiddle.net/6reh1ptd/
Reference: https://stackoverflow.com/a/8619489/1585362

Line Break in HTML Select Option?

Can I have a two line text in an html select option? How?
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>
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"> (...and my really really long option text that is basically a continuation of previous option)</option>
<option disabled style="font-style:italic"> (...and still continuing my previous option)</option>
<option>Another real option text</option>
</select>
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.
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"> This is my description for the no option</option>
<option value="2,2" style="background:#eeeeee"> This is line 2 for the no option</option>
<option value="3">Maybe</option>
<option value="3,1" style="background:#eeeeee"> This is my description for Maybe option</option>
<option value="3,2" style="background:#eeeeee"> This is line 2 for the Maybe option</option>
<option value="3,3" style="background:#eeeeee"> This is line 3 for the Maybe option</option>
</select>
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
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:
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.
Just style the select control like this:
<select style="height: 50px; white-space: pre-wrap;">
Result:
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>
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>
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;
};
});
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.
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.