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
Related
I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:
.clear-css {
all:unset;
}
and append it to all options using jquery just before it is used, like this:
$('option').addClass('clear-css');
Still blank.
I've also tried
.clear-css {
all:initial;
}
Still blank.
I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.
Any suggestions?
You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:
// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="" disabled selected>Choose an option...</option>
<option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
<option value="vanguard">Vanguard</option>
</select>
Select values must be within the actual <option> tags:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
<option value="Vanguard">Vanguard</option>
</select>
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'm rendering a drop down box that contains a currently selected value using selected="true".
<select id="dropDown">
<option selected="true" value="1">value2</option>
<option value="2">value3</option>
<option value="3">value4</option>
</select>
Initially the selected value corresponds to the selected="true", but if I play around with the drop down box and then refresh the page the selected="true" is ignored and the displayed value is the last one I chose. I tried using selected="selected" with the same results.
Thanks for your help.
Change your select field to <select id="dropDown" autocomplete="off">
For best browser support it's actually (although it seems so dumb) better to use
autocomplete="nope"
To quote MDN:
In some cases, the browser will keep suggesting autocompletion values
even if the autocomplete attribute is set to off. This unexpected
behavior can be quite puzzling for developers. The trick to really
forcing the no-autocompletion is to assign a random string to the
attribute [...] Since this random value is not a valid one, the browser will give
up.
It's a binary value, not an attribute (for some reason). Use:
<option selected="selected" value="1">value2</option>
or:
<option selected value="1">value2</option>
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>
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.