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

Two select boxes with 'Other' options

本文关键字：其他 选项 选择 两个      更新时间：2023-09-26

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

我错过了什么？

如果我

理解正确，您希望在选择"Other1"时让第二个 SELECT 标签显示第二个输入框，就像第一个标签对"其他"所做的那样。

你真的很接近，但你的Javascript需要一些调整。 您当前正在测试更改的"其他"元素，然后更改对象 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 扩展到第二个。

相关文章：