请协助我..回复：*表单字段* 我想隐藏()我的"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>```

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

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

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

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

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 2

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

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

将此行替换为以下行

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

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

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

Answer 3

通过查看您的问题，我发现在"其他"选项的选择框中指定的值是小写的，而您在 jquery 中比较的更改代码的值是句子大小写。

并且元素标识符也没有被错误地指定。您需要将其更改为"标题">

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

我希望这对你有所帮助。

Answer 4

这是有效的谢谢大家：-(阿尼斯·在点上，这就是帮助

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