How to add "selected" to select option using javascript

Question

I have the following code and I am trying to add "selected" to the option dynamically, when the user select an option. How can i do it using Javascript ? Example when the user select "Candy" I want to add <option value="candy" selected>Candy</option>

function urlDirect() {
  var businessTypeSelected = document.getElementById("BusinessType").value;
  //alert("x " +x);
  if (businessTypeSelected != "") {
    window.location.href = location.host + businessTypeSelected;
    document.getElementById("BusinessType").selectedIndex = document.getElementById("BusinessType").selectedIndex;
  } else {

  }
}

<span class="custom-dropdown custom-dropdown--blue custom-dropdown--large">
  <select id="BusinessType" class="custom-dropdown__select custom-dropdown__select--blue" onChange="urlDirect()">
    <option value="default">Select your business type</option>
    <option value="auto">Auto </option>
    <option value="aero">Aeroplane</option>
    <option value="film">Film</option>
    <option value="candy">Candy</option>
  </select>
</span>

Possible duplicate

ODelibalta
– ODelibalta

2015-07-10 15:39:03 +00:00
Commented Jul 10, 2015 at 15:39 — ODelibalta
– ODelibalta, Commented Jul 10, 2015 at 15:39

Chrillewoodz · Accepted Answer · 2015-07-10 15:39:23Z

5

This should do:

var select = document.getElementById('BusinessType');
select.addEventListener('change', function() {

  select.options[select.selectedIndex].setAttribute('selected');
});

Also I'd suggest you change the name of the id to business-type since CSS isn't written in camelCase.

answered Jul 10, 2015 at 15:39

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

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

2 Comments

user244394 Over a year ago

how will it remember what the user has selected? as each page will have the same drop down /combo box?

Chrillewoodz Over a year ago

That's for another question. My answer is for the question you have provided.

David Buck · Accepted Answer · 2020-07-10 14:52:20Z

0

var select = document.getElementById('BusinessType');
select.options[indexOfoption].selected = true;

You can do it by this method too. it's easy to understand

edited Jul 10, 2020 at 14:52

David Buck

3,87840 gold badges54 silver badges73 bronze badges

answered Jul 10, 2020 at 14:37

Jashan Kapoor

1

Collectives™ on Stack Overflow

How to add "selected" to select option using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related