Selecting an item in a Dropdown control from javascript no jQuery

Question

I'm using Office UI Fabric and I'm using a ms-Dropdown control. From javascript, I'm trying to select and item

<div class="ms-Dropdown" tabindex="0">
  <label class="ms-Label" style="font-size: 14px; font-weight: 600;">My Options</label>
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
  <select id="myoptions" class="ms-Dropdown-select">
    <option>Choose an option&amp;hellip;</option>
    <option>One</option>
    <option>Two</option>
  </select>
</div>

From Javascript, I run

document.getElementById("myoptions").value = "Two";

or

document.getElementById("myoptions").selectedIndex = 2;

Both don't work properly. The UI don't refresh with the new selected option.

Any idea how can I select an item from Javascript (no jQuery)?

document.getElementById("myoptions").selectedIndex = 2; should work!!! — Mamun
– Mamun, Commented Jul 25, 2019 at 8:34

Clarity · Accepted Answer · 2019-07-25 08:31:19Z

1

Your options are missing values:

 <select id="myoptions" class="ms-Dropdown-select">
    <option value=''>Choose an option&amp;hellip;</option>
    <option value='One'>One</option>
    <option value='Two'>Two</option>
  </select>

answered Jul 25, 2019 at 8:31

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

2 Comments

Mamun Over a year ago

document.getElementById("myoptions").selectedIndex = 2; should work!!!

J19 Over a year ago

But UI is not updated with the selected value. The first option is showed, not updated with new selected option.

becher henchiri · Accepted Answer · 2019-07-25 09:20:41Z

1

Use this solution :

 //set item index
 var option = document.getElementById("myoptions").item(2)
 option.setAttribute("selected",true)

   <div class="ms-Dropdown" tabindex="0">
  <label class="ms-Label" style="font-size: 14px; font-weight: 600;">My Options</label>
  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
  <select id="myoptions" class="ms-Dropdown-select">
    <option>Choose an option&amp;hellip;</option>
    <option >One</option>
    <option >Two</option>
  </select>
</div>

answered Jul 25, 2019 at 9:20

becher henchiri

6774 silver badges11 bronze badges

Comments

sdn404 · Accepted Answer · 2019-07-25 08:42:37Z

0

try this:

document.getElementById("myoptions").options.selectedIndex = 2;

answered Jul 25, 2019 at 8:42

sdn404

6345 silver badges7 bronze badges

Collectives™ on Stack Overflow

Selecting an item in a Dropdown control from javascript no jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related