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

Select box with 'Other' option not showing in Chrome and Firefox

本文关键字：显示 Chrome Firefox 其他 选项 选择      更新时间：2023-09-26

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

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

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

提前谢谢。

您正在尝试将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 示例。

你在没有该ID的项目上使用getElementByID（），你为它们设置了一个不同的名称。有关在 chrome 中工作的修复代码，请参阅此处：http://jsfiddle.net/zTwmb/5/

相关文章：