Javascript 如何在选择时显示输入类型？_Javascript_Jquery_Html_Css_Ajax

Javascript 如何在选择时显示输入类型？

javascript jquery html css ajax

Javascript 如何在选择时显示输入类型？,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我知道这很简单，但我尝试了很多解决方案，但都失败了。我有一个表单，我在中使用标记，我使用两个值coo和uh我希望当用户选择uh时，它会显示一个额外的输入类型字段这是我的密码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

我知道这很简单，但我尝试了很多解决方案，但都失败了。我有一个表单，我在

中使用

标记，我使用两个值

coo

和

uh

我希望当用户选择uh时，它会显示一个额外的

输入类型

字段

这是我的密码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌
<script>

$('#s_designation').on('change',function(){
    if ($(this).val() === "uh") {
        $("#uh").show()
    }
    else {
        $("#uh").hide()
    }
});
</script>

<title>Untitled Document</title>
</head>

<body>

<label for="db">Choose type</label>
<select name="s_designation" id="s_designation">

   <option value="coo">Chief Operating Officer</option>
   <option value="uh">Unit Head</option>
</select>

<div id="uh" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Designation"/>
</div>

</body>
</html>


‌
$（'s#u designation'）。在（'change'，function（）上{
如果（$（this.val（）=“uh”）{
$（“#uh”）.show（）
}
否则{
$（“#uh”）.hide（）
}
});
无标题文件
选择类型
首席运营官
单位负责人
具体说明

在代码中，您对

$（function（）

行进行了注释：

您还缺少必需的jquery库文件

请将此添加到您的html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

我刚刚测试了您的代码，它运行良好：

链接：

编辑：但这可能是因为JSFIDLE。尝试取消对Javascript的第一行的注释，这应该会有所帮助！：-）

我希望我能帮助你。如果您需要更多帮助，请随时写评论：-）

这里是您的工作代码（在我的本地机器上检查过）这里是您的问题的答案


‌
$（函数（）{
$（'s#u designation'）。在（'change'，function（）上{
如果（$（this.val（）=“uh”）{
$（“#uh”）.show（）
}
否则{
$（“#uh”）.hide（）
}
});});
无标题文件
选择类型
首席运营官
单位负责人
具体说明

您在加载文档之前执行了

jQuery

代码，这意味着

select

元素对

jQuery

不可见，如果

jQuery

没有找到任何给定元素，则不会抛出错误

使用

$（文档）.ready

如下所示，它将在文档加载后加载您的代码：

<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    }
    else {
    $("#uh").hide()
    }
  });
});
</script>
-------
</head>


-------
-------
$（文档）.ready（函数（）{
$（'s#u designation'）。在（'change'，function（）上{
如果（$（this.val（）=“uh”）{
$（“#uh”）.show（）
}
否则{
$（“#uh”）.hide（）
}
});
});
-------

如果要在页面加载后执行jQuery代码

只需将jQuery代码放在

标记之前，如下所示：

<body>
-------
-------


<script>

  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    }
    else {
    $("#uh").hide()
    }
  });

</script>

</body>


-------
-------
$（'s#u designation'）。在（'change'，function（）上{
如果（$（this.val（）=“uh”）{
$（“#uh”）.show（）
}
否则{
$（“#uh”）.hide（）
}
});

到底是什么失败了？当我单击

uh

时，我的代码没有显示我的额外输入字段，请尝试将代码放入

$（document）.ready（）

。看起来没问题。你的代码正在运行。fin，检查这里：@RejithRKrishnan它在my.php文件上不工作。你能解释一下它的用法吗？这不是我的浏览器问题。因为jquery日历工作正常。但这段代码有问题，当我取消注释第一行it Dream Viewer show Error时，现在你引起了我的注意。DreamViewer告诉你什么？（我现在打开我的DreamViewer）非常感谢Felix。我解决了我的问题：）

<head>
-------
-------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function() {
  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    }
    else {
    $("#uh").hide()
    }
  });
});
</script>
-------
</head>

<body>
-------
-------


<script>

  $('#s_designation').on('change',function(){
    if( $(this).val()==="uh") {
    $("#uh").show()
    }
    else {
    $("#uh").hide()
    }
  });

</script>

</body>