select method to restore to default value

Question

Iam trying to do something that look easy but i cant find any soulotion,

i have <select> tag with 5 <option> all i want to do is when i click a button (have function inside of it) the select tag will be the default one (the first one) for example :

            <select className={'smallSelect'} onChange={appliances}>

                 <option defaultValue =''>Add</option>   {/* The default  */}
                 <option  value='<Fan/>'>Air-Conditioner</option>
                 <option value='<HotTub/>'>boilermaker</option>
                 <option value='<Bulb/>'>lamp</option>
                 <option value='<Radio/>'>stereo system</option>

            </select><br/>   {/* After clicking the button the option will be the default */}
            <button className={'myButton'} onClick={newAppliances}>Add</button>

use the selected attribute instead of defaultValue – EugenSunic Dec 20 '20 at 00:19 — EugenSunic, Dec 20 '20 at 00:19

score 0 · Answer 1 · answered Dec 20 '20 at 00:24

I assume the button onClick event calls the function newAppliances?

You need to set the select value to ''. So add something like this at the end of your newAppliances function.

document.getElementById('.smallSelect').value = '';

See this: How do I programmatically set the value of a select box element using JavaScript?

For React

The above solution is for normal javascript, if you want to do the react way, read this: React JSX: selecting "selected" on selected <select> option

select method to restore to default value

1 Answers1

For React