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>块中添加以下功能（您可以使用此单一功能替换函数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事件。

但是有更严重的问题：

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

[...]

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

选项onclick替代方案

2 个答案: