Question

我在选择框中有其他选项的脚本。

在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">

有人可以看看这个并告诉我我错过了什么吗？

提前致谢。

Answer 1

您尝试将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]，而不仅仅是选择。

尝试：

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 example

Answer 2

您对没有该IF的项目使用了getElementByID（），您在其上设置了一个不同的名称。请参阅此处了解适用于Chrome的修复代码：http://jsfiddle.net/zTwmb/5/

选择未在Chrome和Firefox中显示“其他”选项的框

2 个答案: