选项onclick替代方案

Question

好的，所以我有一个在FF中运行的脚本，但不是IE或Chrome。 基本的想法是，当您从下拉菜单中选择其中一个选项时，它将切换到下面菜单中的另一个相关选项。 （这是一个贝宝订单表格）

你可以在这里看到它 - 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

您可以通过为<select>元素添加onchange事件处理程序而不是<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>块中添加以下函数（可以使用此单个函数替换函数displayResult()和displayResult2() ）：

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

以上更改将使您的页面在所有浏览器（包括IE7！）上按预期工作

Answer 2

最好发布一个显示您的问题的最小示例，而不是指向一个充满无关内容的页面。

techfoobar可能已经给你你想要的答案，但是为了记录：

脚本：

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

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

HTML：

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

如果要使用内部事件处理程序调用两个不同的函数，请将它们都放在一个属性中，不要复制该属性：

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

此外，使用select元素，您可以更好地使用onchange。 请注意，对于IE，使用光标键导航的用户每次按下某个键以导航选项时都会调度onchange事件。

但是有更严重的问题：

1. 01 abd 02将被视为数字1和2。
2. 无论如何，被调用函数忽略了上述参数，那么重点是什么？
3. 发生单击事件时会调用这两个函数，但每个函数都会在同一个select元素中设置一个不同的选项，因此第二个函数总是获胜（如果第二个被调用，并且在不同的onclick属性中设置它们，则第二个一个可能在不同浏览器中有所不同）

[...]

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