选项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>块添加的功能（你可以用这个单一功能替代功能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