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

您正在尝试将 getElementById 与没有您引用的 ID 而是名称（在您的 opt 和 opt1 变量中）的元素一起使用。例如，在您的行var opt = document.getElementById('i_skate');中，没有 ID 为 i_skate 的元素，但确实有一个名称为 i_skate 的元素。现在您可以更改该元素的 ID 并解决问题，或者更改您的 JavaScript（如下所示）以使用 getElementsByName 代替var opt = document.getElementsByName('i_skate');。

getElementsByName 与 getElementById 略有不同，因为 getElementById 只会返回一个元素（如果存在），而 getElementsByName 可以返回多个元素。在这种情况下，您需要将第一个元素称为 opt[0] 而不仅仅是 opt。

尝试：

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 回答