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