如何显示输入字段,如果"其他"在下拉列表中被选为选项?

时间:2017-08-02 16:05:05

标签: javascript jquery html

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

所有建议都非常感谢!

由于

1 个答案:

答案 0 :(得分:1)

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

  1. 开头不会隐藏输入。因此,在有人在下拉列表中选择一个选项之前,它仍然可见。

  2. 选择器语法在下拉输入的on-change事件中无效。

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