0

我有另一个与此类似的问题，并试图看看我是否可以让它以类似的方式工作，但我没有成功。我有两个下拉菜单，其中一个的选项取决于您在第一个下拉菜单上选择的选项，但我遇到了一个问题，我需要在同一页面上使用相同的菜单两次，我认为可能已经奏效，但没有。我自己意识到这是因为你不能有两个具有相同 ID 的对象。我想知道如何使下面的脚本与类而不是表单的 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，IE 7/8 没有实现这个方法。我建议看看像 jquery 这样的框架来简化所有浏览器的兼容性问题！

于 2012-05-17T02:40:31.670 回答
1

马修，这是给你的演示。希望我得到了你想要的。

来源| 演示

但正如 Allaire 所说，这不适用于旧 IE。如果兼容性有问题，您可以自定义 getElementsByClassName（网上有很多）或使用 jQuery。

于 2012-05-17T03:08:15.840 回答
0

你需要的是document.querySelectorAll()或document.querySelector()。

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

它就像一个 jQuery，但在 HTML5 浏览器中是原生的！

这比document.getElementsByClassNameIE 8 支持它要好！ http://www.quirksmode.org/dom/w3c_core.html#gettingelements

然后对于不支持的：

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