Html select none selected

How can I set the default value for an HTML element?

I just posted an answer that enables to dynamically change the defaults, it also covers the multiple selection. And it works in Reactjs. It does what you want and a lot more. Hope it helps sombody.

34 Answers 34

Set selected=»selected» for the option you want to be the default.

If you’re using Angular, note that ng-model overrides the the default selected value (even as undefined if you did not set the bound object). Took me a while to figure that was why the selected=»selected» option was not selected.

If you are using React, React reports a warming when you use select: VM71 react_devtools_backend.js:3973 Warning: Use the defaultValue` or value props on instead of setting selected on `. Also using this method makes it cumbersome to change the defaults to what the user already has in the database to present to her, the last state selected as a default. So I added another answer showing how to do this in React and that it also applies to vanilla javascript. It is at the end. Hope it helps.

In case you want to have a default text as a sort of placeholder/hint but not considered a valid value (something like «complete here», «select your nation» ecc.) you can do something like this:

  One Two Three Four Five 

Thanks for adding the available attributes. After figuring out how to solve the basic solution of this problem, you’re left with the selected option being the first option, so by adding the «hidden» attribute you hide that first option

@DanielParejoMuñoz, ok, it’s negligible. But if my doctype is html, and not xhtml, why waste any byte at all?

I have a select box in angular and no matter what I do it refuses to show «choose here» in the select box.

I came across this question, but the accepted and highly upvoted answer didn’t work for me. It turns out that if you are using React, then setting selected doesn’t work.

Instead you have to set a value in the tag directly as shown below:

this one works. but requires an onChange method and the element to be controlled. if you don’t wanna make your controlled, use defaultValue instead. Read more from beta.reactjs.org/reference/react-dom/components/select#props

Provide «selected» keyword inside the option tag, which you want to appear by default in your drop down list.

Or you can also provide attribute to the option tag i.e.

@JRM I think what you mean is that if for your document to be XHTML compliant than an attribute must have a a value. In HTML there is no need for «selected=selected». The examples on w3.org/wiki/HTML/Elements/select, developer.mozilla.org/en-US/docs/HTML/Element/select do not specify a value. The important thing to note is that selected=»false» is not allowed and selected=»» also makes it selected. The only way to make an options not selected is to remove the attribute. w3.org/html/wg/drafts/html/master/…

@Juan Mendes selected set null seems also work at least by d3 style. const options = select .selectAll(‘option’) .attr(‘selected’,function (d) < return d===config.name?true:null; >);

if you want to use the values from a Form and keep it dynamic try this with php

  One Two Three Four Five  

Why not disabled?

When you use disabled attribute together with Reset value is not reset to original placeholder. Instead browser choose first not disabled option which may cause user mistakes.

Default empty value

Every production form has validation, then empty value should not be a problem. This way we may have empty not required select.

XHTML syntax attributes

selected=»selected» syntax is the only way to be compatible with both XHTML and HTML 5. It is correct XML syntax and some editors may be happy about this. It is more backward compatible. If XML compliance is important you should follow the full syntax.

  One Two Three Four Five  

‘Choose here’ disappears after an option has been selected.

An improvement for nobita’s answer. Also you can improve the visual view of the drop down list, by hiding the element ‘Choose here’.

  One Two Three Four Five 

Another example; using JavaScript to set a selected option.

(You could use this example to for loop an array of values into a drop down component)

// Get the select element var select = document.getElementById("yourDropDownElementId"); // Create a new option element var el = document.createElement("option"); // Add our value to the option el.textContent = "Example Value"; el.value = "Example Value"; // Set the option to selected el.selected = true; // Add the new option element to the select element select.appendChild(el); 

@7yl4r No. selected is a boolean property as defined by w3c — w3.org/TR/html401/interact/forms.html ` 17.6.1 Pre-selected options selected [CI] — When set, this boolean attribute specifies that this option is pre-selected.` For more information on usage see w3c schools — w3schools.com/jsref/prop_option_selected.asp

The selected attribute is a boolean attribute.

When present, it specifies that an option should be pre-selected when the page loads.

The pre-selected option will be displayed first in the drop-down list.

If you are in react you can use defaultValue as attribute instead of value in the select tag.

If you are using select with angular 1, then you need to use ng-init, otherwise, second option will not be selected since, ng-model overrides the defaul selected value

I would just simply make the first select option value the default and just hide that value in the dropdown with HTML5’s new «hidden» feature. Like this:

   One Two Three Four  

value attribute of tag is missing, so it doesn’t show as u desired selected. By default first option show on dropdown page load, if value attribute is set on tag. I got solved my problem this way

This example has been tested to work with multiple elements on the page, and can also work with normal text elements. It has not been tested for setting the value to more than one selection when , however you can probably modify this sample to support that.

• Add an attribute data-selected to each element and set the value(s) to the value of the option you wish to have selected.
• Use javascript’s querySelectorAll() to select all elements that have the custom attribute you just added.

In the following example, when run, the first should show option with the value user as selected, and the second should show the option with the value admin as selected.

document.querySelectorAll('[data-selected]').forEach(e => < e.value = e.dataset.selected >);

  Pubblica Utenti Admin   Pubblica Utenti Admin 

I used this php function to generate the options, and insert it into my HTML

 $retstring = $retstring . '>' . sprintf($formatstring,$i) . ' '; > return $retstring; > ?> 

And then in my webpage code I use it as below;

If $endmin is created from a _POST variable every time the page is loaded (and this code is inside a form which posts) then the previously selected value is selected by default.

This code sets the default value for the HTML select element with PHP.

Set selected=»selected» where is option value is 3

You just need to put attribute «selected» on a particular option instead direct to select element.

Here is snippet for same and multiple working example with different values.

 Select Option 3 :- 1 2 3 4 5  
 
 
Select Option 5 :- 1 2 3 4 5  
 
 
Select Option 2 :- 1 2 3 4 5 

Default selected value is Option-4

  Select Option-1 Option-2 Option-3 Option-4 Option-5  

You will need an «id» attribute in each option for this solution to work:

The function first tries to find the select> with the id, then it will search for the value_selected in the select> options and if it finds it, it will set the selected attribute returning true. False otherwise

The problem with is, it's sometimes disconnected with the state of what's currently rendered and unless something has changed in the option list, no change value is returned. This can be a problem when trying to select the first option from a list. The following code can get the first-option the first-time selected, but onchange="changeFontSize(this)" by its self would not. There are methods described above using a dummy option to force a user to make a change value to pickup the actual first value, such as starting the list with an empty value. Note: onclick would call the function twice, the following code does not, but solves the first-time problem.

Font Size Small Medium Large Extra large   

I use Angular and i set the default option by

HTML Template

To set the default using PHP and JavaScript:

State: Andhra Pradesh Andaman and Nicobar Islands . . West Bengal  document.getElementById("State").querySelector('option[value=""]').selected = true; heredoc; > ?> 

This is simple method to make default option selected.

Can be used for multiple selects on an HTML page.

• Find every select
• Read the id and value of that select
• Make the option selected

 Basket Ball Tennis Golf Bowling  
 Hammer Drill Screwdriver Saw Wrench 

Источник

Removing a "default" in a select box

I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?

You'll need to use JavaScript. You may wish to consider using a JS library, such as jquery, mootools, scriptaculous.

Why not just use the HTML tag? It would say "Pick a choice!" but it can't be selected. No JavaScript needed.

4 Answers 4

Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.

The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.

Your code for the "Pick a choice!" option will look something like this:

i found this answer earlier, but it isn't enought. "pick a choice!" need to be completely removed i'm trying something in JQuery to put it in display: none; posting answer soon. Thx for your help !

I appreciate the feedback Charles, just a tip for the future, if you're looking for options it is best to list the languages you're working with, preferably listing them in the tags but even written in the question is OK. The reason being is I have a number of solutions with PHP that I can write without thinking, there are others like that with JS and jQuery. Notice how nobody has given you an answer using jQuery - just a comment with the suggestion to try it, it's greatly because you didn't tag it as being acceptable in your answer, plus there is no previous tries shown with jQuery. Good luck

Источник