1

我有一个选择字段的工作代码，其中包含其他选项，在选择其他类型时显示一个文本框。但是，我在为同一页面上的 2 个选择框编写代码时遇到了麻烦。

这是我的脚本。

    function toggleField(val) {
      var o = document.getElementById('other');
      (val == 'Other') ? o.style.display = 'block': o.style.display = 'none';
    }
<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 Week
  </OPTION>
  <OPTION VALUE="Few times a Month">Few times a Month Month
  </OPTION>
  <OPTION VALUE="Other">Other</OPTION>
</SELECT>
<INPUT TYPE="TEXT" NAME="other" ID="other" STYLE="display: none;" SIZE="20">
</TD>
<TD WIDTH="10" ALIGN="LEFT"></TD>
<TD WIDTH="110" ALIGN="LEFT" VALIGN="TOP">

  <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">Other1</OPTION>
  </SELECT>
  <INPUT TYPE="TEXT" NAME="other1" ID="other1" STYLE="display: none;" SIZE="20">

我错过了什么？

4

1 回答 1

1

如果我对您的理解正确，您希望在选择“Other1”时让您的第二个 SELECT 标记显示第二个 INPUT 框，就像第一个用于“Other”一样。

你真的很接近，但你的 Javascript 需要一些调整。您当前正在测试“Other”的更改元素，然后更改对象 o 的显示，该对象是对 id 为“other”的元素的引用。您将需要扩展此逻辑以包括您的新选择框（带有“Other1”选项）和相应的输入框。

因此，您可能需要执行类似...

<SCRIPT TYPE="text/javascript">
function toggleField(val) {
  var o = document.getElementById('other');
  var o1 = document.getElementById('other1');
  (val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
  (val == 'Other1')? o1.style.display = 'block' : o1.style.display = 'none';
}
</SCRIPT>

这会将相同的功能从第一个 SELECT 扩展到第二个。

于 2012-05-22T20:36:36.680 回答