オプションonclickの代替

Question

私はFFで動作するビットオフスクリプトを持っていますが、IEやクロムでは動作しません。基本的な考え方は、ドロップダウンメニューからオプションの1つを選択すると、下のメニューの別の関連オプションに切り替わります。

はあなたがここにアクションでそれを見ることができます（これは、PayPalの注文フォームにあります） - http://www.bizzaromatic.smappdooda.com/xtra/dvd.html

私はFFがIEやChromeをオプションフィールドにonclickイベントを受け付けなくなることを考え出しました。問題は今、コードを適切なオプションを選択するように動作させる方法を見つけることができません。どんな助けも素晴らしいだろう。

追加されたコード

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

あなたの<option>要素に対してクリックハンドラではなく、あなたの<select>要素のonchangeイベントハンドラを追加することによって、それを解決することができます。

にご <select>を変更し

：（あなたはこの単一の機能を持つ関数displayResult()とdisplayResult2()を置き換えることができます）

<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>ブロックに次の関数を追加します。

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：あなたが使用して2つの異なる機能を呼び出したい場合は

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

組み込みのイベントハンドラを両方の属性に入れ、属性を複製しないでください：

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

また、select要素を使用すると、onchangeを使用する方がはるかに優れています。 IEの場合、カーソルキーを使用してナビゲートするユーザーは、キーを押してオプションをナビゲートするたびにonchangeイベントを送出します。

しかし、あるはるかに深刻な問題：そうポイントは何だ、とにかくと呼ばれる機能によって

1. 01アブド02が数字1として扱われ、2
2. 上記のパラメータは無視されますか？
3. clickイベントが発生したときに両方の関数が呼び出されますが、それぞれ同じselect要素で選択された異なるオプションが設定されるため、2番目の関数が常に優先されます（秒がすべて呼び出され、 、もう一つは異なるブラウザで異なる場合があります）

[...]

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