how to put multiple values in an option? - html

I have a select with values like van, economy, economy-citroen. I select the van option and it displays the vans, however I would like to make an option that calls the van and economy values at the same time (not the multiple select version).
Something like value="economy van".
<select id="car_type" class="car_type span12">
<option value="-1" selected="selected">Any</option>
<option value="economy">Economy</option>
<option value="economy-citroen">Economy</option>
<option value="premium">Premium</option>
<option value="standard">Standard</option>
<option value="van">Van</option>
</select>
I would like to make it like:
<select id="car_type" class="car_type span12">
<option value="-1" selected="selected">Any</option>
<option value="economy">Economy</option>
<option value="economy-citroen">Economy</option>
<option value="premium">Premium</option>
<option value="standard">Standard</option>
<option value="van">Van</option>
<option value="van economy">Economy Van</option> ---so it displays both the economy and vans
</select>


Use this
<select multiple>
<!-- options here -->
</select>
Using this, you'll be able to select multiple options for that select element.
To read more on the HTML element select please refer the Mozilla Developer Network's document
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select


Add the multiple attribute to the select element.

Related

Adding title groups to select options

currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look

Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>

Optgroups in a datalist

I am trying to create a input-box where the available anwsers ar listed in a list below. This I can do but i am not able to sort the available anwsers in optgroups. When the code runs the anwsers is listed without the optgroups.
Is it at all possible to use optgroups in datalists or is optgroups exclusive to select elements?
Here is a code sample where the optgroups is not shown
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<optgroup value="Elbilar">elbil
<option value="teslas">Tesla Model S</option>
<option value="teslax">Tesla Model X</option>
<option value="tesla3">Tesla Model 3</option>
<option value="i3">BMW i3</option>
<option value="id3">Volkswagen ID.3</option>
<option value="id4">Volkswagen ID.4</option>
<option value="niro">KIA Niro</option>
<option value="etron">Audi e-Tron</option>
<option value="polestar">Polestar 2</option>
<option value="xc40e">Volvo XC40 Recharge</option>
<option value="leaf">Nissan Leaf</option>
<option value="taycan">Porsche Taycan</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="outlander">Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid">Volvo V60 twin engine</option>
<option value="optima">KIA Optima SV</option>
<option value="passatgte">Volkswagen Passat GTE</option>
<option value="priushybrid">Toyota Prius Hybrid</option>
<option value="golfgte">Volkswagen Golf GTE</option>
<option value="x545e">BMW X5 45e</option>
<option value="530e">BMW 530e</option>
</optgroup>
</datalist>

As the documentation says for <optgroup> :
Permitted parents: A <select> element.
There are no other elements mentioned as permitted parents. Therefore optgroup is exclusively a child of select.

While optgroups is exclusively a child of select, select can be a child of datalist!
Although it is not the cleanest solution, you can use a trick used for compatibility of browsers that don't support datalist https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
In the more elaborate case, the datalist element can be given contents that are to be displayed for down-level clients that don't support datalist. In this case, the option elements are provided inside a select element inside the datalist element.
With the addition of value="" readonly to an option displaying the optgroup name. So that it is not possbile to select it.
<label>Välj en elbil
<input class="downdrop" id="valdModellCompare2" list="elfordon" onchange=getSelectValue();></label>
<datalist id="elfordon">
<label> Select from the list:
<select name="car">
<optgroup value="Elbilar">elbil
<option value="" readonly>Elbilar</option>
<option value="teslas"> >Tesla Model S</option>
<option value="teslax"> >Tesla Model X</option>
<option value="tesla3"> >Tesla Model 3</option>
<option value="i3"> >BMW i3</option>
</optgroup>
<optgroup value="Plug-in Hybrider">hybrid
<option value="" readonly>Plug-in Hybrider</option>
<option value="outlander"> >Mitsubitshi Outlander Hybrid</option>
<option value="v60hybrid"> >Volvo V60 twin engine</option>
<option value="optima"> >KIA Optima SV</option>
</optgroup>
</select>
</label>
</datalist>

HTML select options are inaccessible

I must have missed something very trivial, but I cant figure it out.
The select below shows 5 options (as expected), but I cant get access to option 6 and 7. The scrollbar is shown, but the browser doesnt allow me to move it down
<select size='5' multiple name='driver[]'>
<option value= >(No Driver Filter)</option>
<option value=drivername=''></option>
<option value=drivername='alex'>alex</option>
<option value=drivername='marc'>marc</option>
<option value=drivername='frank'>frank</option>
<option value=drivername='james'>james</option>
<option value=drivername='michael'>michael</option>
</select>

I think your code is not well formatted . You should use double quotes for attribute values.
<select size="5" multiple="multiple" name="driver[]">
<option value="" >(No Driver Filter)</option>
<option value="drivername=''"></option>
<option value="drivername='alex'">alex</option>
<option value="drivername='marc'">marc</option>
<option value="drivername='frank'">frank</option>
<option value="drivername='james'">james</option>
<option value="drivername='michael'">michael</option>
</select>

how to display select box options without selecting select box

There is a requirement in my project like.,
I have select box in desktop view and in mobile only options has to be displayed.
I got stuck how to display all the options without selecting select box .
<h3>Desktop View</h3>
<select name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<br/><br/><br/><br/>
<h3>Mobile View</h3>
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
Thanks
Demo

Just give multiple for your select box and it'll display like that...
<select multiple name="carmakes" id="carmakes">
<option selected='selected' value="0">Car makes</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>

HTML select dropdown list

I want to have a drop down list using the select, option tag... but when it first appear I want it to have an information, such as "Please select a name" then the user clicks on the drop down list and selects from the available option... I tried to made the "Please select a name" as an option, but then the user will be able to select this... which is not what I want. Do I need to use javascript to have this feature or what do I need to do?
If there'a jquery way to do this, this would be much helpful

Try this:
<select>
<option value="" disabled="disabled" selected="selected">Please select a name</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
When the page loads, this option will be selected by default. However, as soon as the drop-down is clicked, the user won't be able to re-select this option.

<select>
<option value="" style="display:none">Choose one provider</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
This way the user cannot see this option, but it shows in the select box.

Have <option value="">- Please select a name -</option> as the first option and use JavaScript (and backend validation) to ensure the user has selected something other than an empty value.

This is an old post, but this worked for me
<select>
<option value="" disabled selected>Please select a name...</option>
<option>this</option>
<option>that</option>
</select>

<select name="test">
<option hidden="true">Please select a name</option>
<option value="Cash">Cash</option>
<option value="Draft">Demand Draft No.</option>
<option value="Cheque">Cheque No.</option>
</select>

Maybe this can help you resolve without JavaScript
http://htmlhelp.com/reference/html40/forms/option.html
See DISABLE option

Simple, I suppose. The onclick attribute works nicely...
<select onchange="if(this.value == '') this.selectedIndex = 1; ">
<option value="">Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>
After a different option is selected, if the first option is selected, Option 1 will be selected. If you want an explanation on the javascript, just ask.

<select>
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Marry</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>

If you want to achieve the same for the jquery-ui selectmenu control then you have to set 'display: none' in the open event handler and add '-menu' to the id string.
<select id="myid">
<option value="" disabled="disabled" selected="selected">Please select name</option>
<option value="Tom">Tom</option>
<option value="Marry">Mary</option>
<option value="Jane">Jane</option>
<option value="Harry">Harry</option>
</select>
$('select#listsTypeSelect').selectmenu({
change: function( event, data ) {
alert($(this).val());
},
open: function( event, ui ) {
$('ul#myid-menu li:first-child').css('display', 'none');
}
});

I'm sorry to necro an old post - but I found a better way of doing this
What I believe this poster wanted was :
<label for="mydropdown" datalabel="mydropdown">Country:</label>
<select name="mydropdown">
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
<option value="Other">Not Listed</option>
</select>
I found this information in another post while searching for this same answer - Thanks

<select>
<option value="" disabled selected hidden>Select an Option</option>
<option value="one">Option 1</option>
<option value="two">Option 2</option>
</select>

Make a JavaScript control that before the submit cheek that the selected option is different to your first option

This is how I do this with JQuery...
using the jquery-watermark plugin (http://code.google.com/p/jquery-watermark/)
$('#inputId').watermark('Please select a name');
works like a charm!!
There is some good documentation at that google code site.
Hope this helps!

<select>
<option value="" disabled="disabled" selected="selected">Please select a
developer position</option>
<option value="1">Beginner</option>
<option value="2">Expert</option>
</select>

From what I understand, you are looking for a placeholder for your select options, which has to be selected when no value is pre-selected, and cannot be selected by user, or seen.
<select name="selectOne">
<option value="" disabled selected hidden>Choose an option</option>
<option value="this">This</option>
<option value="that">That</option>
</select>