Is there a way to have some text (not option) inside <select>? - html

We have a Select inside a form with say 4 options. My client wants to categorize options in a way so we can have some text on top related options. It will looks like:
<select>
Cat 01
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
Cat 02
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
</select>
I know above is not a valid markup. I know I can put Cat01 & Cat02 as options without a value but I am wondering if there is a valid code or more appropriate workaround for it?


I believe what you need is optgroup:
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>


Yes there definately is
Try this
<select>
<optgroup label="Cat 01">
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
</optgroup>
<optgroup label="Cat 02">
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
</optgroup>
</select>


You want to use the OPTGROUP tag
http://www.w3.org/wiki/HTML/Elements/optgroup
So your example should become
<select>
<optgroup label="Cat 01">
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
</optgroup>
<optgroup label="Cat 02">
<option value="Some Value">Some Option</option>
<option value="Some Value">Some Option</option>
</optgroup>
</select>

Related

How to put a title in a drop down list?

The dropdownlist is white/empty. I would like to put a title for example Choose.
illustration
I tried adding <optgroup label="Choose">/ </optgroup> but I want the title to be in the input before that the user clicks on the dropdown.
How to do this?
<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%">
<optgroup label="Choose ">
<option value="Y">Yes</option>
<option value="N">No</option>
</optgroup>
</select>
Here is a reproduction on Stackblitz.
Thanks

Use this -
<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%" placeholder="Choose">
<option disabled selected>Choose</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
This answer is copied partially from this answer answered by gam6itko

<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%" placeholder="Select a value">
<option selected disabled value="">Select a value</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>

how to display year in drop down using html?

Below is html code I wrote. how do i edit it in html such that the word year appears on the drop down box for it? So far it displays 2020.
<select class="" name="year" required>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>

Unlike input elements, select does not have a "placeholder" so you have to add it in as option, but if you don't want users to select it you can place the disabled attribute.
<select class="" name="year" required>
<option value="" disabled selected>Select Year</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>

How to set size of Materialize select element?

Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case.
I have also tried to set the height but no luck either.
<div class="input-field col s4">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
Thank you

Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:
.select-dropdown {
height: 300px;
}
https://codepen.io/doughballs/pen/NWWGNMq

You can simply specify it in the wrapping div here my example is 300px
https://codepen.io/mxnelles/pen/GRJeXGd
<div class="input-field col s4" style="width:300px">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>

How to keep whitespaces in the begining of select options?

I need to keep whitespaces in the begining of select options so I'm adding styles: style="white-space: pre, and rendered form is as below:
<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
<option value="32" style="white-space: pre">G1</option>
<option value="33" style="white-space: pre"> p1</option>
<option value="34" style="white-space: pre"> p333</option>
<option value="35" style="white-space: pre">G2</option>
<option value="36" style="white-space: pre"> p3</option>
<option value="37" style="white-space: pre">GłãWNA3</option>
<option value="38" style="white-space: pre"> pod5</option>
</select>
and whitespaces are gone.

Adding instead of <pre> works for me:
<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
<option value="32">G1</option>
<option value="33"> p1</option>
<option value="34"> p333</option>
<option value="35">G2</option>
<option value="36"> p3</option>
<option value="37">GłãWNA3</option>
<option value="38"> pod5</option>
</select>
Preview

place at the beginning OR (which is better since there is no real white-space present then) use padding-left:1em;

You should use option groups for that.
A nice simple example from W3Schools
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Can I make it so that some rows in a select cannot be clicked?

I have a standard type of select list:
<select>
<option value="cars1">Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2">Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This is just an example but what I would like to do is to make Cars 1 and Cars 2 in the list as headings that cannot be selected.
Is there some way that I can do this?

Sure, it's called an <optgroup>: fiddle
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Another way is to use disabled attribute:
<select>
<option value="cars1" disabled>Cars 1</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="cars2" disabled>Cars 2</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Live demo: Tinkerbin

Use optgroup tag
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

I'm guessing you are looking for optgroup:
<select>
<optgroup label="Cars 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Cars 2">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select> ​
FIDDLE