In the HTML, I got something like this for select.
What it's doing is the default value showing for the select dropdown is Select year but it cannot be selected.
<select>
<option disabled hidden selected>
Select Year
</option>
<option value="2021">2021</option>
</select>
But when I implement it in React.
It giving me this error
Use the defaultValue or value props on instead of setting selected on .
But when I use default value or value the SELECT YEAR option is not there anymore.
All you need is to remove both selected and disabled attributes from first <option>:
<select>
<option hidden>Select Year</option>
<option value="2021">2021</option>
</select>
Here's why:
<select> is shorthand for <select defaultValue={undefined}>, which makes the first <option> with a value of undefined get selected. In your case, that's the first <option>, since it doesn't have a set value, which is equivalent to having a value set to undefined.
Probably the most important bit is removing disabled. Remember this is JSX, not HTML. JSX is used by React to create valid HTML. If you specify disabled attribute, React won't allow that <option> to be selected, regardless of method.
But you want that <option> selected by default, so it doesn't make sense to disable it.
You only want the user not to be able to select it, which is exactly what the hidden attribute does.
Working demo.
Related
, I know we can set default option value by using selected in option's attribute.
But Is there any way to set a default value of option from attribute in select tag . i.e when i open page that value should be selected itself , and i want to do this in select tag
Something like this
<select selected= "saab">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>
No. The only way, in HTML, to set the default option is to use the selected attribute on the option.
This avoids the need to provide id attributes for options (given that multiple options can share the same value) and it also because a select element can have multiple options selected at the same time (if the multiple attribute is set).
I am facing an issue with a drop down select in IE11. If the drop down contains one option element it does not expand down while selecting options. The option is overlapping the select which makes it difficult to select.
Example: I have a drop down which consists of element "Ajitesh"
<select> <option> Ajitesh </option> </select>
In the above code whilst selecting "Ajitesh" the drop down is not expanding down .
You could try to contain the single option in an opt-group tag like so:
<select>
<optgroup label="">
<option value="Ajitesh">Ajitesh</option>
</optgroup>
</select>
Otherwise, you could simply add an another - or many - empty option tags like:
<select>
<option value="Ajitesh">Ajitesh</option>
<option value=""></option>
</select>
edit: Please note that this is IE11 (and others) default behaviour, that is, it has been designed to prohibit the use of a dropdown with only one option. If you do not want to add an empty element, there isn't the option of changing the default behaviour of the browser itself - it's just not possible given your circumstances.
My select element has the value set to a key on the binding object, and that key is set correctly, because i have other values that reference it (those work), however the select box isn't showing my value correctly.
<select value="{{key}}">
<option value="">- Field -</option>
<template repeat="{{field in fields}}">
<option value="{{field.key}}">{{field.key}}</option>
</template>
</select>
Expands to:
<select value="{{key}}">
<option value="">- Field -</option>
<option value="name">name</option>
<option value="phone">phone</option>
<option value="address">address</option>
</select>
If I console.log this.key in the ready function of my element I get 'name', further my second select in the element relies on this.key, and that select element's options are showing correctly.
Is there something special I need to do to have the select select the correct element from the key? I could do it in JS, but that seems overkill. Can you not set a select box using the value? Is it only a getter so-to-speak?
Ok, if you're setting the options in your select, in your ready function, then you can't set the value in the same function or before. You have to wait till after that function returns, or the selectbox won't have the options you need yet.
For now I'm using a 0ms timeout, although im sure their are better events to subscribe to instead.
Regardless if anyone else is having issues setting their select values for polymer elements, then keep in mind the options need to be set before you have have your set value be reflected in the UI and then you have to explicitly set it again.
In all browsers that I know of, the first option is selected pr default in the below HTML:
<select>
<option>foo</option>
<option>bar</option>
</select>
But can I count on this behavior? Or would it be better practice to explicit specify default value even when it is the first option, ie would it be safer to go:
<select>
<option selected>foo</option>
<option>bar</option>
</select>
The HTML(5) specification doesn't say that the default selected option should be the first one if no selected attribute is present.
The selectedness of an option element is a boolean state, initially false. Except where otherwise specified, when the element is created, its selectedness must be set to true if the element has a selected attribute. Whenever an option element's selected attribute is added, its selectedness must be set to true.
It does however say that if no selected value is present then the default should be to return a selectedness value of -1.
The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.
I guess you therefore shouldn't assume that the first option will always be selected as default.
I don't think it matters. It's only if you do not have your default value at the top. The "selected" is if you want to change the default option. If you don't have it on the top.
Like this:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
On first render (or perhaps when the <select> element is created), the first <option> is implicitly selected: selectedIndex returns 0, and selected (of first option) returns true.
But if you change the options with JavaScript, for example remove all options and add new ones, then selectedIndex returns -1, and selected (of first option) returns false.
All the above assumes, of course, that the selected="selected" attribute is never used.
So, if you are dynamically adding options, and want to make use the first is initially selected, then you must use the selected attribute.
I've looked far and wide, but could not find anything.
Is there an "anatomy of HTML elements" guide of sorts that has this kind of information?
EDIT: By "visible" I mean "visible by default", without user (or anything else for that matter) having engaged it.
"the dropdown (arrow|icon|button)" is the name of the thing on the right side and "selected value display" is the (usually) white box with the default/selected value. As far as I know, there are no standard names for the shadow dom
I would call this "selected value". In ASP.Net, for example, that's the property name for the visible value in a drop down list control (a SELECT input).
If, by visible portion, you mean 'What option is visible by default (or on the initial load)", what you need to do is add 'selected="selected"' to the option tag you want to show eg:
<select name="tester">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3" selected="selected">Third Option</option>
<option value="4">Fourth Option</option>
</select>
This would display a select box with 'Third Option' showing in it.
You can find out more about <select> and <option> on W3 Schools:
http://www.w3schools.com/tags/tag_select.asp
http://www.w3schools.com/tags/tag_option.asp
Are you referring to the CSS display property? Also might help to understand what you are trying to accomplish.