Although this may not be the best UI implementation, I have a drop-down list with several elements that must be grouped using multiple placeholders (e.g. ----- group 1 -----). I'd like to make the place-holders un-selectable.
I found a solution for a single placeholder here:
How do I add an unselectable and customizable placeholder to a select box
but it doesn't seem to be extendable to multiple place-holders.
Thanks in advance for any ideas.
Not angular specific, but can you use select option groups?
<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>
Check out http://www.w3schools.com/tags/tag_optgroup.asp and their demo at
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
Related
<select className="option-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Here is how the basic select is defined. How to target the dropdown list UI? For example, changing the default background of the dropdown.
EDIT:
I find that it does work in Chrome if I target the <option> element. But on firefox, it does not work.
select {
background: yellow
}
option {
color: red
}
<select className="option-select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
It's possible to style the select menu 'button', but not the dropdown itself. To accomplish that you need to mimic the functionality with javascript. https://www.w3schools.com/howto/howto_custom_select.asp
Just a few CSS properties can change dropdown appearance and it's better to use a react components library such as material-ui.
I want to use Html5 multi-select in my application which should work on ipad(safari). Will the present multi-select works on ipad??
If not do we need to add any attribute to make it work on ipad
According to w3schools this feature works in Safari well, you only have to provide a multiple argument to the <select> tag
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
So i have these options.
<option value="bentley">Bentley</option>
<option value="ferrari">Ferrari</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="peugeot">Peugeot</option>
<option value="citroen">Citreon</option>
If i click on honda, the honda cars are displayed. IF toyota then toyotas..and so on.
I would like to make an option, where i only reference the luxury cars. Just do not know how to make it work.
<option value"ferrari:bentley">Luxury cars</option>
Any ideas?
Note: It can help others, who would like to reference more than one value in an option. As I was searching around for 1.30 hours there is not much out there.
Thank you in advance
You could use an optgroup
JSfiddle
<select name="carss">
<optgroup label="Luxury cars">
<option>Ferrari</option>
<option>Bentley</option>
<option>Rolls Royce</option>
</optgroup>
<optgroup label="Others">
<option>Honda</option>
<option>Ford</option>
<option>Toyota</option>
</optgroup>
</select>
For multiple values in option tag use below code
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
First one is using array and second one is using Object.
Refer this for more info.
You should do like this
create a Table with Car names and its type like
Luxury,Sedan,etc.
Allow users to select cars based on types or car name.(dont combine
both)
Then when user select Cars by type you need to get cars from first
table corresponding to that class name
I am trying to select an option in a select menu that contains an optgroup. I have tried
document.getElementsByName("dob_year")[0].selectedIndex = "1980"; and it seems to work with select menus that contain no "optgroups", bit it does work with them. How can I select the "1980" option?
<select name="dob_year">
<optgroup label="Morning">
<option value="1980">80</option>
<option value="1981">81</option>
<option value="1982">82</option>
<option value="1983">83</option>
</optgroup>
</select>
As the name suggest, the selectedIndex is an index.
So you have to use the following:
document.querySelector('select').selectedIndex = 2;
Working jsfiddle: http://jsfiddle.net/vkSKy/
I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?
Feel free to use jQuery or raw javascript.
<select name="testSelect">
<optgroup label="fruits">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="cars">
<option value="ford">ford</option>
<option value="toyota">toyota</option>
<option value="ferrari">ferrari</option>
</optgroup>
</select>
You can do this using jQuery:
$('select').change(function() {
var selected = $(':selected', this);
alert(selected.closest('optgroup').attr('label'));
});
See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/
Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/
alert(selected.parent().attr('label'));
Well, in pure js:
this.options[this.selectedIndex].parentNode.label
Not a single function call and less code to boot. :-)