HTML SELECT - Change selected option by VALUE using JavaScript

Question

There can be many options in a SELECT dropdown.

<select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
    ...
</select>

I'm creating a Update Profile page where a user's profile is retrieved from the database and a form is shown with those values. When it comes to SELECTdropdown, there are many options. So, its tedious test all values

if (value == '1')
    echo "<option selected value='car'>1</option>";`

So, I want to have the corresponding option selected from its value. Like when I do something like sel.value = 'bike' using JavaScript the option 2 should be selected.

Are you sure value="car" and the text is 1, and not the other way around? Is the <select> code static, or dynamically created from something like a database? — freefaller
– freefaller, Commented Sep 4, 2012 at 14:28
You want to select this with the serverside? Why no serverside tag? — epascarello
– epascarello, Commented Sep 4, 2012 at 14:30

Dave Chen · Accepted Answer · 2018-07-03 19:40:33Z

149

You can select the value using javascript:

document.getElementById('sel').value = 'bike';

DEMO

edited Jul 3, 2018 at 19:40

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

answered Sep 4, 2012 at 14:28

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eduardo Xavier Over a year ago

Remember: you may use sel.value = 'bike' instead of document.getElementById('sel').value

Denilson Sá Maia Over a year ago

@EduardoXavier, if you first run 'var sel = document.getElementById('sel');', then yes, you can. Otherwise, no, you can't. If the element only has id, the only way is to get the element first. However, if it has the name attribute and it is inside a form, you can use formelement.sel.value. w3.org/TR/html5/forms.html#the-form-element and w3.org/TR/html5/forms.html#dom-form-nameditem

Eduardo Xavier Over a year ago

@DenilsonSá This question is about the use of the "id". What you said about form and names is rigth but you're completly wrong when you say I can't access an element in the way I proposed. Let us do some practice then, have a look at here jsfiddle.net/tub6f0Lg :P cheers!

Denilson Sá Maia Over a year ago

@EduardoXavier: I stand corrected, you are right! Thanks for pointing it out! :) w3.org/TR/html5/browsers.html#named-access-on-the-window-object However, although handy, relying on IDs being available as global variables because of window object may lead to messy and unreadable code. Consider another developer (maybe even yourself after a while) reading the code.

user5846985 Over a year ago

javascriptstutorial.com/blog/…

Trevor · Accepted Answer · 2012-09-04 14:29:48Z

40

If you are using jQuery:

$('#sel').val('bike');

answered Sep 4, 2012 at 14:29

Trevor

6,6995 gold badges40 silver badges69 bronze badges

Comments

Vijay · Accepted Answer · 2013-10-15 05:24:36Z

14

try out this....

JSFIDDEL DEMO

using javascript

document.getElementById('sel').value = 'car';

using jQuery

$('#sel').val('car');

edited Oct 15, 2013 at 5:24

answered Oct 12, 2013 at 10:22

Vijay

8,47111 gold badges47 silver badges70 bronze badges

Comments

Makyen · Accepted Answer · 2019-04-29 04:09:10Z

0

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

edited Apr 29, 2019 at 4:09

Makyen♦

33.6k12 gold badges94 silver badges128 bronze badges

answered May 25, 2016 at 19:13

user5846985

1 Comment

moken Over a year ago

Answer needs supporting information Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

herrstrietzel · Accepted Answer · 2025-08-17 23:41:16Z

Not defined option values

Setting the <select> value directly by value property can also set non-defined option values.

Since the idea of a select is to pass a value from a predefined set of "allowed" option values – setting a non-existent option value may lead to errors.

To prevent this, we should also check whether the option value exists.

// add a prototype method
HTMLSelectElement.prototype.setSelectValue = function (value) {
  return setSelectValue(this, value)
};


// check whether the option value or label exists
function setSelectValue(selectEl, value) {
  let hasValue = false
  const options = [...selectEl.options]
  let hasOptionValue = options.find(option => option.value === value);
  let hasOptionLabel = !hasOptionValue ? options.find(option => option.label === value) : null;
  
  if (hasOptionValue || hasOptionLabel) {
    if(hasOptionValue){
      selectEl.value = value;
    }
    else if(hasOptionLabel){
      selectEl.value = hasOptionLabel.value;
    }
    hasValue = true;
  }
  return hasValue;
}




// demo example
const select = document.getElementById('select')

let btns = document.querySelectorAll('button')
btns.forEach(btn=>{
  btn.addEventListener('click', e=>{
    result.textContent = '';
    let value = e.currentTarget.dataset.val;
    //let hasValue = setSelectValue(select, value);   
    let hasValue = select.setSelectValue(value)   
    if(!hasValue){
      result.textContent = `value does not exist – fallback: »${select.value}«`
    }
  })
})

<select  id="select">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3">3</option>
  <option value="valuecasesensitive" >ValueCaseSensitive</option>
  <option >Only Label</option>
</select>
<p>
  <button type="button" data-val="1">1</button>
  <button type="button" data-val="2">2</button>
  <button type="button" data-val="3">3</button>
  <button type="button" data-val="ValueCaseSensitive">ValueCaseSensitive</button>
  <button type="button" data-val="Only Label">Only Label</button>
  <button type="button" data-val="Non-existent">Non-existent</button>
</p>

<p id="result" style="color:red"></p>

The above example also adds more tolerance in case the value and label are different and the input value to find might be the label text.

Collectives™ on Stack Overflow

HTML SELECT - Change selected option by VALUE using JavaScript

5 Answers 5

5 Comments

Comments

Comments

1 Comment

Not defined option values

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

1 Comment

Not defined option values

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related