请帮助我.. RE: *FORM FIELDS* 我想隐藏（）我的 "type=text box" 直到在下拉选项中选择其他选项

Question

**HTML**   
```<fieldset> 

        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user-name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user-email">

       <label for="title">Job Role</label>
        <select id="title" name="user-title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>
      </select> 

      <input type="text" id="other-title" placeholder="Your Job Role"> 

    </fieldset>```

我正在尝试：
DONE //在文档加载完成之前阻止 运行 中的任何 JQuery 代码 DONE //默认聚焦第一个字段

这是我的问题： //隐藏文本框，直到从工作角色中选择 "other"//

**JS**
```$(document).ready(function(){
    $('form:first *:input[type!=hidden]:first').focus();
    $("Other").change(function(){
        if($(this).val() == "Other")
    {
        $("#other-title").show();
    }
    else
    {
        $("#other-title").hide();
    }
        });
                  $("#other-title").hide();
}); ```

Answer 1

我认为您已经在 jquery 选择器中使用了值。

$("Other").change(function(){
     if($(this).val() == "Other")

用下面几行替换这一行

$("#title").change(function(){
      if($(this).children('option:selected').val() == "other")

// 您将使用以下代码在下拉列表中获得选定的值。

$('#ELEMENT').children('option:selected').val()

Answer 2

原始代码的两个主要问题：

1- 为 onchange 事件使用了错误的选择器，将 "Other" 替换为 "#title"

2- 您正在检查该值是否等于 "Other" 而不是 HTML 中的 "other"。注意，字符串比较区分大小写！

下面是应用这两项更改后的工作片段：

$(document).ready(function(){
  $('form:first *:input[type!=hidden]:first').focus();
    $("#title").change(function(){
      if($(this).val() == "other") {
        $("#other-title").show();
      }
      else {
        $("#other-title").hide();
      }
    });
  $("#other-title").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset> 

        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user-name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user-email">

       <label for="title">Job Role</label>
        <select id="title" name="user-title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>
      </select> 

      <input type="text" id="other-title" placeholder="Your Job Role"> 

    </fieldset>

Answer 3

通过查看您的问题，我发现在 "other" 选项的 select 框中指定的值是小写的，而您在 jquery 中比较的值on change code 是句子大小写。

而且元素标识符也没有错误指定。您需要将其更改为 "title"

<option value="Other">Other</option>

$("#title").change(function(){
   if($(this).val() == "Other")
   {
       $("#other-title").show();
   }
   else
   {
       $("#other-title").hide();
   }
 });

希望对你有帮助。

Answer 4

这就是有效的方法 谢谢大家 :-) Anis R. On Point 这就是帮助

    $('#title').change(function(){
    if($('#title').val() == "other")
{
    $('#other-title').show();
}
else
{
    $('#other-title').hide();
}
    });
              $('#other-title').hide();
});```