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

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> 

我已经添加类.howHear和.otherHear他们使用JS，然后尝试此基础上选择隐藏字段，并显示：

//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>