如果在下拉列表中选择“其他”选项，如何显示输入字段？

Question

尝试让此字段保持隐藏状态，仅在用户在下拉列表中选择“其他”时显示，但如果用户意外单击该字段，然后将选项更改为非“其他”值，则隐藏该字段。以下代码是根据我尝试使用一些 CSS 和 JS 进行编辑的调查编写的，因此我无法访问实际代码来更改内容。

HTML：

<select name="1684_51635_4_146338" id="1684_51635_4_146338" onchange="choiceSelected('1684_51635_4_146338', this.selectedIndex);" class="howHear">
    <option value="NOREPLY">Please select response</option>
    <option value="Social Media">Social Media</option>
    <option value="Email">Email</option>
    <option value="Family or Friend">Family or Friend</option>
    <option value="Service provider referral">Service provider referral</option>
    <option value="other">other</option>
</select>
<tr valign="top" class="old-school">
    <td width="5%" class="req" align="right" nowrap="nowrap">
        &nbsp;
    </td>
    <td>
        <label class="wrapable" for="1684_51635_5_146441">
            <span class="aural-only" style="position: absolute; left: -9999px;">Question - Not Required -</span>
            <div class="explicitWrap">Other:</div>
        </label>
        &nbsp;
        <br>
        <span class="NetscapeFix"><input type="text" name="1684_51635_5_146441" id="1684_51635_5_146441" value="" size="30" maxlength="40" class="otherHear"></span>
        <br>
        <br>
    </td>
</tr>

我使用JS向它们添加了类

.howHear

和

.otherHear

，然后尝试隐藏该字段并根据选项显示它：

//if other selected in howHear drop down, show .otherHear input field
   $('#1684_51635_4_146338').on('change',function(){
        if( $('#1684_51635_4_146338').val()==="other"){
        $("#1684_51635_5_146441").show()
        }
        else{
        $("#1684_51635_5_146441").hide()
        }
    });

但是，问题是“其他：”输入字段始终显示，无论是否选择某个选项。我尝试在 SOF 上寻找其他解决方案，但也无法让它们为此工作。请注意，我正在调查中使用其他下拉菜单，这些下拉菜单也将 this.selectedIndex 作为其 onchange 函数的一部分（如果这有影响的话）。

非常感谢所有建议！

谢谢

Answer 1

正如评论中提到的，您的代码有两个小问题：

1. 输入一开始就不是隐藏的。因此，它一直保持可见，直到有人在下拉列表中选择一个选项。

2. 选择器语法在下拉输入的

   on-change

   事件中无效。

//if other selected in howHear drop down, show .otherHear input field
$('#1684_51635_4_146338').on('change', function() {
  if ($("#1684_51635_4_146338").val() === "other") {
    $("#1684_51635_5_146441").show()
  } else {
    $("#1684_51635_5_146441").hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="1684_51635_4_146338" id="1684_51635_4_146338" onchange="choiceSelected('1684_51635_4_146338', this.selectedIndex);" class="howHear">
    <option value="NOREPLY">Please select response</option>
    <option value="Social Media">Social Media</option>
    <option value="Email">Email</option>
    <option value="Family or Friend">Family or Friend</option>
    <option value="Service provider referral">Service provider referral</option>
    <option value="other">other</option>
</select>
<tr valign="top" class="old-school">
  <td width="5%" class="req" align="right" nowrap="nowrap">
    &nbsp;
  </td>
  <td>
    <label class="wrapable" for="1684_51635_5_146441">
            <span class="aural-only" style="position: absolute; left: -9999px;">Question - Not Required -</span>
            <div class="explicitWrap">Other:</div>
        </label> &nbsp;
    <br>
    <span class="NetscapeFix"><input type="text" name="1684_51635_5_146441" id="1684_51635_5_146441" value="" size="30" maxlength="40" class="otherHear" style="display:none;"></span>
    <br>
    <br>
  </td>
</tr>

Answer 2

它无法在移动设备上工作。但在桌面设备上可以正常工作