Question

尝试让此字段保持隐藏状态，仅在用户选择＆＃34;其他＆＃34;在下拉列表中，如果用户意外点击该字段，则还会隐藏该字段，然后将该选项更改为不是＆＃34;其他＆＃34;的值。以下代码来自我尝试使用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()
        }
    });

然而，问题是＆＃34;其他：＆＃34;如果选择了一个选项，输入字段始终显示并不重要。我尝试在SOF上查看其他解决方案，但也无法让它们为此工作。请注意，我正在使用调查中的其他下拉菜单，如果这会产生影响，也会将this.selectedIndex作为其onchange函数的一部分。

所有建议都非常感谢！

由于

Answer 1

正如评论中所述，您的代码存在两个小问题：

开头不会隐藏输入。因此，在有人在下拉列表中选择一个选项之前，它仍然可见。
选择器语法在下拉输入的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>

如何显示输入字段，如果＆＃34;其他＆＃34;在下拉列表中被选为选项？

1 个答案: