CODEWITHSUNDEEP
javascripthtmlselectcombobox
Koen Peters
Koen Peters

Reputation: 12916

show empty value in html select element

I have an HTML select element (combo box) in a form with a couple if options in it. As always each option has a specific value. During the page's initialization I get a value from the server that I must use as the selected option in the list. Sometimes however I get a value from the server that does not match any of the available options. (grrrr)

I want to let the user know that the value I got from the server is not a valid option. What I'd like to do is show an empty select box (as if no selection was made) without having an actual empty option as one of the options. Also I'd like to use the default select element if possible. Is something like this possible?

Edit: When you set the value for a combox to '' in IE9 (I used $('select').val('') ) it empties the text in the combo box which is exactly what I need. Unfortunately only IE9 does this, so this is not an option.

Upvotes: 4

Views: 12415

Answers (2)

naivists
naivists

Reputation: 33511

Out of the box, HTML selects do not provide such functionality. You will have to add an empty <option value="somethingwrong">Please, pick a value</option> element and use scripting to check if the user has selected this specific value. I'd suggest catching both onchange event of the dropdown and onsubmit event of whole form.

Upvotes: 4

Ranganadh Paramkusam
Ranganadh Paramkusam

Reputation: 4368

You can insert option in select, and remove that whenever it is changed to reduce problems with that options

Check the Demo here

Upvotes: 1

Related Questions