javascript - 选项 onclick 替代方案

Question

好的，我有一些可以在 FF 中运行的脚本，但不能在 IE 或 chrome 中运行。基本思想是，当您从下拉菜单中选择一个选项时，它将切换到下面菜单中的另一个相关选项。 (它是 Paypal 订单形式)

您可以在这里看到它的实际效果 - http://www.bizzaromatic.smappdooda.com/xtra/dvd.html

我发现 FF 会接受选项字段中的 onclick 事件，但 IE 或 Chrome 不会。现在的问题是我不知道如何使代码能够选择正确的选项。任何帮助都会很棒。

添加代码

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

您可以通过添加onchange来解决它您的 <select> 的事件处理程序元素而不是您的 <option> 的点击处理程序元素。

更改您的 <select>至:

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

并在 <script> 中添加以下函数 block (您可以用此单个函数替换函数 displayResult() 和 displayResult2()):

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

上述更改将使您的页面在所有浏览器(包括 IE7!)上按预期工作