Option Onclick Alternative

Ok so I have a bit o' script that works in FF but not IE or chrome. The basic idea is that when you select one of the options from the drop down menu it will switch to another rele

Solution 1:

You can solve it by adding an onchange event handler for your <select> element rather than a click handler for your <option> elements.

Change your <select> to:

<selectname="os0"onchange="applyChange(this)"><optionselected="selected"value="DVD">DVD $25.00 USD</option><optionvalue="DVD w/ 1 CCSB">DVD w/ 1 CCSB $35.00 USD</option><optionvalue="DVD w/ 2 CCSB">DVD w/ 2 CCSB $40.00 USD</option></select>

And add the following function in your <script> block (you can replace the functions displayResult() and displayResult2() with this single function):

functionapplyChange(obj) {
  if(obj.value == 'DVD') {
    document.getElementById("dvd").selected=true;
  }
  else {
    document.getElementById("price").selected=true;
  }
}

The above changes will make your page work as expected on all browsers (including IE7!)

Solution 2:

It is much better to post a minimal example that shows your issue rather than pointing to a page full of irrelevant stuff.

techfoobar has probably given you the answer you want, but for the record:

script:

functiondisplayResult() {
    document.getElementById("price").selected = true;
}

functiondisplayResult2() {
    document.getElementById("dvd").selected = true;
}

HTML:

<select name="os0" onclick="displayResult2(01)" onclick="displayResult(02)">

If you want to call two different functions using an intrinsic event handler, put them both in the one attribute, do not duplicate the attribute:

<select … onclick="displayResult2(01); displayResult(02)">

Also, with a select element, you are much better to use onchange. Be beware that with IE, a user navigating using the cursor keys will dispatch an onchange event every time they press a key to navigate the options.

But there are far more serious issues:

1. 01 abd 02 will be treated as numbers 1 and 2.
2. the above parameters are ignored by the called function anyway, so what's the point?
3. both functions are called when a click event occurs, but each sets a different option to selected in the same select element, so the second one always wins (if a second is called at all and where they are set in different onclick attributes, the second one might be different in different browsers)

[...]

<optionvalue="DVD Only"id="dvd">DVD Only
    <optionvalue="Red/Green"id="price">Red/Green
    <optionvalue="Red/Yellow">Red/Yellow