Question

I would like to select an option in a select menu, based off of a javascript function called from an onclick.

See, the user gets to select how many lashes Bob gets, but if the user clicks on the button, it selects “1” from the pull-down list.

Basically, I want to set the value of a pull-down menu’s default option based on a java script event. here’s the jsfiddle I’ve given an example to. I’ve tried just about every event in the w3schools.com repository, and I’ve just about given up.

  How Many lashes would Bob like? 
  <select id="lashes" name="lashes">
  <option value="five">5</option>
  <option value="four">4</option>
  <option value="three">3</option>
  <option value="two">2</option>
  <option value="one">1</option>
  <option value="zero">0</option>
  </select>

  <input type="button" value="Bob actually wants only 1 lashing" onclick="doit()">

​  function doit() {
    document.getElementByID('lashes') = 'one';
  }​

http://jsfiddle.net/pietbarber/H8Ctx/

Also, I don’t want to use any javascript libraries if I can get away with it, so no jsquery, or whatever.

TL;DR – I want to click on that button and have ‘1’ selected from the pull-down menu when I click on that button.

Answer 1

The simplest way is to use the selectedIndex property of the select element.

function doit() {
  //notice I changed .getElementByID to .getElementById
  document.getElementById('lashes').selectedIndex = 4;
}​

You can test it here.