Select dropdown menu option with javascript

Question

I have a dropdown menu and I cannot figure out how to make a javascript function select a drop down menu option. I have tested the output of the variables and they are all correct, but it still will not select the option when clicked. Here is the function and drop down menu.

Function

function formFill(a, b, c){
        theform.from.value = a;
        theform.to.value = b;
        for(var i = 0;i < document.getElementById("stateSelect").length;i++){
            if(document.getElementById("stateSelect").options[i].value == c ){
                document.getElementById("stateSelect").selected = true;
            }
        }
    }

Menu item

<select id="stateSelect" name="stateSelect">
    <option value="none">(None)</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>

You shouldn't repeat document.getElementById("stateSelect"). Call it once and store the reference in a variable. — RoToRa
– RoToRa, Commented Apr 15, 2011 at 14:42

David Hancock · Accepted Answer · 2011-04-15 14:32:44Z

51

Change the line that reads:

document.getElementById("stateSelect").selected = true;

to:

document.getElementById("stateSelect").selectedIndex = i;

answered Apr 15, 2011 at 14:32

David Hancock

15k4 gold badges43 silver badges44 bronze badges

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

1 Comment

Damienknight Over a year ago

Because it needs to know which item to select. .selected is a get() that gets the state of selected/not selected, but cannot set the state because it does not know which item to select.

Anatoly Mironov · Accepted Answer · 2011-04-15 14:47:08Z

20

Alt. you can set selected to the actual option: select.options[i].selected = true;

...
        var select = document.getElementById("stateSelect");
        for(var i = 0;i < select.options.length;i++){
            if(select.options[i].value == c ){
                select.options[i].selected = true;
            }
        }
...

answered Apr 15, 2011 at 14:47

Anatoly Mironov

7,5962 gold badges29 silver badges27 bronze badges

Comments

Dorian · Accepted Answer · 2024-02-09 09:16:58Z

0

With Stimulus, for instance we fetch the user's time zone and then we auto-select it in the dropdown

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input"]

  connect() {
    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    [...this.inputTarget.options].forEach((option) => {
      if (option.value == timeZone) {
        option.selected = true
      }
    })
  }
}

answered Feb 9, 2024 at 9:16

Dorian

9,4116 gold badges51 silver badges74 bronze badges

Collectives™ on Stack Overflow

Select dropdown menu option with javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related