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

我在选择框中有其他选项的脚本。在Chrome和Firefox中未显示“其他”选项的选择框

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

有人可以看看这个，并告诉我我失踪了吗？

在此先感谢。

来源

2012-05-25 James Andrews

您试图将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。

来源

2012-05-25 15:12:36 j08691

谢谢。这就是诀窍，标志着这一点解决了。 –

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

来源

2012-05-25 15:29:19 Grezzo

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

回答

相关问题