I have the following code ;
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option label="courseLevel">Foundation</option>
<option label="courseLevel">Undergraduate</option>
<option label="courseLevel">Postgraduate</option>
</select>
In firefox and chrome i get "Foundation","Undergraduate","Postgraduate" as the options. In internet explorer i get "courseLevel","courseLevel","courseLevel". Why? and how can it be fixed?
label is not being used correctly (only IE 7+ and Opera support it). You don't need it.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option>Foundation</option>
<option>Undergraduate</option>
<option>Postgraduate</option>
</select>
What you are probably looking for is value. For example, you could assign numeric values to each of the options like so:
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value='0'>Foundation</option>
<option value='1'>Undergraduate</option>
<option value='2'>Postgraduate</option>
</select>
However, you don't need them. When no values are specified, the text between <option> and </option> will be used.
option tags don't need a label attribute. It might be the cause of this problem.
because firefox ignores the label elements assigned to each option.
http://www.w3schools.com/TAGS/att_option_label.asp , http://www.w3schools.com/TAGS/tag_option.asp
seems like only IE7+ and Opera supports this tag
The label attribute is only supported by IE/Opera and will replace the option's innerText value.
Your XHTML is wrong.
You actually want <option value=""> tags; the label property makes no sense there. Furthermore, each value of an <option> tag should be unique. The label tag is correct there, since it corresponds to the id of the <select> tag and will make the drop-down menu appear when the 'Level' text is clicked.
<label for="courseLevel">Level</label>
<select name="courseLevel" id="courseLevel">
<option value="1">Foundation</option>
<option value="2">Undergraduate</option>
<option value="3">Postgraduate</option>
</select>
Related
I am working with html select boxes and have found that they currently don't support the placeholder attribute, but I don't exactly understand why this is the case.
I would just like to understand what are the reasons for this if any? Thanks for any insight.
Likely, this is because conventional placeholder text doesn't make sense in a select element because you only have a predefined set of options to choose from. You can't edit the text in a select element like you can with an editable combo box in many desktop applications, but that's only because HTML simply does not provide an editable select element out of the box.
The select element implements "placeholders" by way of what the HTML5 spec calls a placeholder label option, which is described thusly:
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
And it gives the following example:
Code Example:
The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.
<p>
<label for="unittype">Select unit type:</label>
<select id="unittype" name="unittype">
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3" selected> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
</p>
When there is no default option, a placeholder can be used instead:
<select name="unittype" required>
<option value=""> Select unit type </option>
<option value="1"> Miner </option>
<option value="2"> Puffer </option>
<option value="3"> Snipey </option>
<option value="4"> Max </option>
<option value="5"> Firebot </option>
</select>
This idiom has in fact been in use since antiquity.
Placeholder text will appear when the user didn't feed any value.
selectbox, in this scenario the 1st option will appear when the user didn't enter a value. So we can use 1st <option> as placeholder text & place holder attribute is not required.
In this simple jsfiddle (code below), I have a regular <select>, not a <select multiple>, with two options having the selected attribute. In Chrome 39, I see "d" selected. Apparently the behavior is to select the last of the "selected" options, which seems logical. Is this a behavior I can count on across browsers?
<select>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c">c</option>
<option value="d" selected>d</option>
</select>
A select element whose multiple attribute is not specified must not
have more than one descendant option element with its selected
attribute set.
source w3.org
So it's not valid HTML and therefore the browsers' behavior is not predictable. If you've create these selected options via Javascript, you should maybe handle your desired behavior via JS as well.
I have the following HTML code used to create on a page:
<select>
<option value="" selected>test</option>
<option value="test2">test2</option>
</select>
But when looking at the HTML in Google Chrome's DOM inspector it looks like this:
<select>
<option value selected>test</option>
<option value="test2">test2</option>
</select>
See the difference? For the first <option>...</option>, value="" is turned into just value. The value, when set to the empty string is simply discarded. Is there any way to set the value of an option tag to the empty string? I need this because I'm pulling elements out of a database to create a <select> menu. Each <option> will have it's value set to value of a database element and some of those elements have the empty string as their value.
It is just Google Chrome's DOM inspector's notation (removes '=""' from attributes). If you inspect it with FireBug or simply view the source then you will see it is OK.
Your sample code produces this in Google Chrome:
And this is the result in FireFox:
So don't worry about that.
bob
as Hanky said you can use
selected = "selected" or ""
so the code will be :
<select>
<option value="" selected="selected">test</option>
<option value="test2">test2</option>
or
<select>
<option value="" selected="">test</option>
<option value="test2">test2</option>
Checking this article may help :
W3 option language reference
<option value="" selected="selected">test</option>
This means value is empty string. Even if dom inspector in chrome shows you like that
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/
I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.