0

選択ボックスにその他のオプションのスクリプトがあります。

IE では正常に動作しますが、Chrome や Firefox では動作しません。

スクリプトとフォームは次のとおりです。

<SCRIPT TYPE="text/javascript"> 
    function toggleField(val) {
        var o = document.getElementById('other'); 
        var o1 = document.getElementById('other1'); 
        var opt = document.getElementById('i_skate'); 
        var opt1 = document.getElementById('my-style'); 
        (opt.options[opt.length-1].selected)? o.style.display = 'block' : o.style.display  = 'none'; 
        (opt1.options[opt1.length-1].selected)? o1.style.display = 'block' : o1.style.display = 'none'; 
    } 
</SCRIPT>


<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);">
    <OPTION VALUE="Just a Fan">Just a Fan</OPTION>
    <OPTION VALUE="Everyday">Everyday</OPTION>
    <OPTION VALUE="Few times a Week">Few times a Week</OPTION>
    <OPTION VALUE="Few times a Month">Few times a Month</OPTION>
    <OPTION VALUE="">Other</OPTION>
</SELECT><INPUT TYPE="TEXT" NAME="i_skate" ID="other" STYLE="display: none;" SIZE="20"> 

<SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);">
    <OPTION VALUE="Street Skate">Street Skate</OPTION>
    <OPTION VALUE="Downhill">Downhill</OPTION>
    <OPTION VALUE="Freestyle">Freestyle</OPTION>
    <OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION>
    <OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION>
    <OPTION VALUE="Park">Park</OPTION>
    <OPTION VALUE="Mini Ramp">Mini Ramp</OPTION>
    <OPTION VALUE="">Other1</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="my-style" ID="other1" STYLE="display: none;" SIZE="20">

誰かがこれを見て、私が欠けているものを教えてもらえますか?

前もって感謝します。

4

2 に答える 2

0

参照している ID ではなく名前 (opt および opt1 変数内) を持っていない要素で getElementById を使用しようとしています。たとえば、ラインvar opt = document.getElementById('i_skate');には i_skate という ID を持つ要素はありませんが、i_skate という名前を持つ要素はあります。これで、その要素の ID を変更して問題を解決するか、JavaScript を変更して (以下で行うように)、代わりに getElementsByName を使用することができますvar opt = document.getElementsByName('i_skate');。

getElementsByName は getElementById とは少し異なります。getElementById は 1 つの要素 (存在する場合) のみを返すのに対し、getElementsByName は複数の要素を返すことができるためです。その場合、最初の要素を単に opt ではなく opt[0] として参照する必要があります。

試す：

function toggleField(val) {
    var o = document.getElementById('other');
    var o1 = document.getElementById('other1');
    var opt = document.getElementsByName('i_skate');
    var opt1 = document.getElementsByName('my-style');
    (opt[0].options[opt[0].length - 1].selected) ? o.style.display = 'block' : o.style.display = 'none';
    (opt1[0].options[opt1[0].length - 1].selected) ? o1.style.display = 'block' : o1.style.display = 'none';
}​

jsFiddle の例。

于 2012-05-25T15:12:36.960 に答える
0

そのIDを持たないアイテムで getElementByID() を使用していましたが、それらに異なる名前を設定していました。Chromeで動作するコードの修正については、こちらを参照してください: http://jsfiddle.net/zTwmb/5/

于 2012-05-25T15:29:19.103 に答える