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

【问题标题】：How to display INPUT TYPE on Selection?如何在选择时显示输入类型？
【发布时间】：2015-08-11 19:03:55
【问题描述】：

我知道这很简单，但我尝试了很多解决方案，但都失败了。我有一个表单，我在<option> 中使用<select> 标记我使用两个值coo 和uh 我希望当用户选择时它会显示一个额外的input type 字段。

这是我的代码。

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

【问题讨论】：

到底是什么失败了？
当我点击uh时，我的代码没有显示我的额外输入字段
尝试将代码放入$(document).ready()。 jsfiddle.net/rejithrkrishnan/f4pu6uce 看起来不错。
您的代码运行良好，请在此处查看：jsfiddle.net/m5n6v8as
@RejithRKrishnan 它不适用于 my.php 文件

标签： javascript jquery html css ajax

【解决方案1】：

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

Link:https://jsfiddle.net/g95pyqw6/

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

希望能帮到你。如果您需要更多帮助，请随时发表评论:-)

【讨论】：

不是我的浏览器问题。 Coz jquery 日历工作正常。但是这段代码有问题
当我取消注释第一行时，Dream Viewer 显示错误
现在你引起了我的注意。 DreamViewer 告诉您什么？（我现在打开了我的 DreamViewer）
非常感谢菲利克斯。我解决了我的问题:)

【解决方案2】：

您的jQuery 代码在文档加载之前执行，这意味着select 元素对jQuery 不可见，并且jQuery 不会在找不到任何给定元素时引发错误。

像下面这样使用$(document).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>

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

您只需将 jQuery 代码放在 </body> 标记之前，如下所示：

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


<script>

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

</script>

</body>

【讨论】：

【解决方案3】：

这里是你的工作代码（在我的本地机器上检查）答案在这里是你的问题Jquery not working from Google CND

  <!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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌
    <script>
    $(function() {
          $('#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>

【讨论】：

【解决方案4】：

在您的代码中，您已经注释了 $(function() 行：

您还缺少所需的 jquery 库文件

请将此添加到您的 html 中

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

小提琴：http://jsfiddle.net/0mqze5ny/

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

【讨论】：

你能解释一下它的用法吗？