Question

我有一个带有其他选项的选择字段的工作代码，当选择其他选项时显示一个文本框。但是，我在同一页面上编写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">

我错过了什么？

Answer 1

如果我正确理解你，你想让第二个SELECT标签在选择“Other1”时显示第二个INPUT框，就像第一个选择“Other”一样。

你真的很亲密，但你的Javascript需要一些调整。您当前正在测试“其他”的已更改元素，然后更改对象o的显示，该对象是对id为“other”的元素的引用。您需要扩展此逻辑以包含新的选择框（选项“Other1”）和相应的INPUT框。

所以，你可能需要做类似的事情......

<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扩展到第二个。

两个带有“其他”选项的选择框

1 个答案: