{"id":5222,"date":"2021-10-06T02:00:00","date_gmt":"2021-10-06T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/javascript-select-option\/"},"modified":"2024-02-08T00:33:52","modified_gmt":"2024-02-07T23:33:52","slug":"javascript-select-option","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/javascript-select-option\/","title":{"rendered":"Change “Select” Option Using JavaScript [With Examples]"},"content":{"rendered":"\n

To change the selected option in an HTML <select><\/code> element you have to change the value<\/code> property on the <select><\/code> element or the selected<\/code> property on the <option><\/code> element you want to select.<\/strong><\/p>\n\n\n\n

There are multiple ways you can do it and choosing one or another will depend on the information you have available.<\/p>\n\n\n\n

Let’s see 6 different ways of changing the selected option using JavaScript:<\/p>\n\n\n\n

1. Change Select Option by Value<\/h2>\n\n\n\n

To change the selected option programmatically by the value<\/code> attribute, all we have to do is change the value<\/code> property of the <select><\/code> element.<\/p>\n\n\n\n

The select box will then update itself to reflect the state of this property. This is the most straightforward way of updating a select box state.<\/p>\n\n\n\n

Let’s say that we want to select the option containing the attribute value=\"steve\"<\/code>.<\/p>\n\n\n

<select<\/span> id<\/span>=\"my-select\"<\/span>><\/span>\n   <option<\/span> value<\/span>=\"ann\"<\/span>><\/span>Ann Frank<\/option<\/span>><\/span>\n   <option<\/span> value<\/span>=\"paul\"<\/span> selected<\/span>><\/span>Paul Allen<\/option<\/span>><\/span>\n   <option<\/span> value<\/span>=\"steve\"<\/span>><\/span>Steve Jobs<\/option<\/span>><\/span>\n<\/select<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
All we have to do is set the value of the select box to that same value:<\/p>\n\n\n
const<\/span> changeSelected = (e<\/span>) =><\/span> {\n  const<\/span> $select = document<\/span>.querySelector('#mySelect'<\/span>);\n  $select.value = 'steve'<\/span>\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n