Question

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 relevant option in the menu below. (it’s in a paypal order form)

You can see it in action here – http://www.bizzaromatic.smappdooda.com/xtra/dvd.html

I figured out that FF will accept an onclick event in an option field but not IE or Chrome. Problem is now I can’t figure out how to make the code work to select the right options. Any help would be great.

Added code

Javascript:

<script type="text/javascript">
function displayResult()
{
document.getElementById("price").selected=true;
}
function displayResult2()
{
document.getElementById("dvd").selected=true;
}
</script>

HTML

    <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="HGJ99G982KAEL">
<table>
<tr><td><input type="hidden" name="on0" value="Select One">Select One</td></tr><tr><td><select name="os0">
    <option value="DVD" onclick="displayResult2()">DVD $25.00 USD</option>
    <option value="DVD w/ 1 CCSB" onclick="displayResult()">DVD w/ 1 CCSB $35.00 USD</option>
    <option value="DVD w/ 2 CCSB" onclick="displayResult()">DVD w/ 2 CCSB $40.00 USD</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Options">Options</td></tr><tr><td><select name="os1">
    <option value="DVD Only" id="dvd">DVD Only</option>
    <option value="Red/Green" id="price">Red/Green</option>
    <option value="Red/Yellow">Red/Yellow </option>
    <option value="One of Each">One of Each</option>
    <option value="Surprise Me">Surprise Me!</option>
</select> </td></tr>
</table>
<br><input type="hidden" name="currency_code" value="USD">
<input type="image" src="http://www.bizzaromatic.smappdooda.com/xtra/images/dvd.jpg" border="0" name="submit" title="Buy the DVD"><br><font size=2>Click to order</font>
</form>

Answer 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:

<select name="os0" onchange="applyChange(this)">
  <option selected="selected" value="DVD">DVD $25.00 USD</option>
  <option value="DVD w/ 1 CCSB">DVD w/ 1 CCSB $35.00 USD</option>
  <option value="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):

function applyChange(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!)