0

これに似た別の質問があり、同じように機能させることができるかどうかを確認しようとしましたが、失敗しました。私が持っているのは2つのドロップダウンメニューです。そのうちの1つには、最初のドロップダウンメニューで選択したものに応じてオプションが作成されますが、同じページで同じメニューを2回使用する必要があるという問題が発生しました。動作しましたが、動作しませんでした。同じIDを持つオブジェクトを2つ持つことはできないため、私は自分で気づきました。以下のスクリプトをフォームのIDではなくクラスで機能させるにはどうすればよいでしょうか。

var i;
function fill_damage(i){
    var form1 = document.getElementById("form1a");
    document.form1aa.damage.options.length=0;
    switch(i)
    {
        case 1:
            form1.damage.options[0] = 
                new Option('Cracked screen','Cracked screen');
            form1.damage.options[1] =
                new Option('Cracked top case','Cracked top case');
            form1.damage.options[2] =
                new Option('Cracked bottom case','Cracked bottom case');
            form1.damage.options[3] =
                new Option('Broken keyboard','Broken keyboard');
            form1.damage.options[4] =
                new Option('Faulty touch pad','Faulty touch pad');
            form1.damage.options[5] =
                new Option('Hinge broken','Hinge broken');
            form1.damage.options[6] =
                new Option('Motherboard','Motherboard');
            form1.damage.options[7] =
                new Option('Hard drive','Hard drive');
            break;
        case 2:
            form1.damage.options[0] =
                new Option('Re image','Re image');
            form1.damage.options[1] =
                new Option('Wireless cert','Wirless cert');
            form1.damage.options[2] =
                new Option('Application','Application');
            form1.damage.options[3] =
                new Option('Hacked','Hacked');
    }
}


<form name="form1aa" method="post" id="form1a" >
    <select name="type" 
        onChange="fill_damage(document.form1aa.type.selectedIndex);">
        <option value="">Select Type</option>
        <option value="Hardware">Hardware</option>
        <option value="Software">Software</option>
    </select> 
    <select name="damage">
        <option selected="selected">Select Type First</option>
    </select>
</form>
4

3 に答える 3

2

必要なのはdocument.getElementsByClassName()

document.getElementsByClassName("yourClass")[0]; //first node with that class

ただし、ここで確認できるように注意してください：http : //www.quirksmode.org/dom/w3c_core.html#fivemethods、IE7/8はこのメソッドを実装していません。すべてのブラウザの互換性の問題を単純化するために、jqueryのようなフレームワークを検討することをお勧めします。

于 2012-05-17T02:40:31.670 に答える
1

マシュー、ここにあなたのためのデモがあります。私があなたが望むものを手に入れたことを願っています。

ソース| デモ

しかし、Allaireが言ったように、これは古いIEでは機能しません。カスタムのgetElementsByClassName（Webにはたくさんあります）を作成するか、互換性が問題になる場合はjQueryを使用できます。

于 2012-05-17T03:08:15.840 に答える
0

必要なのはまたはdocument.querySelectorAll()ですdocument.querySelector()。

document.querySelector(".yourClass"); //first node with that class

これはjQueryに似ていますが、HTML5ブラウザーでネイティブです。

document.getElementsByClassNameこれは、IE8がサポートしているため よりも優れています。http://www.quirksmode.org/dom/w3c_core.html#gettingelements

そして、サポートされていない場合：

if(!document.querySelectorAll){
    document.querySelectorAll = jQuery;
}
于 2012-05-17T03:51:35.590 に答える