javascript - 如何在选择中显示输入类型?

标签 javascript jquery html css ajax

我知道这很简单,但我尝试了很多解决方案但都失败了。我有一个使用 <select> 的表格在 <option> 中标记我使用两个值 coouh我希望当用户选择 uh 然后它显示一个额外的 input type field 。

这是我的代码。

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

最佳答案

我刚刚测试了你的代码,它工作正常:

链接: https://jsfiddle.net/g95pyqw6/

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

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

关于javascript - 如何在选择中显示输入类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31938729/

相关文章:

javascript - 绝对位置,底部为 0 仅适用于高度为 100% 的父级

javascript - fullPage.js 不滚动

html - 我的 CSS 样式在 Firefox 中的显示与在 Chrome 中的显示不一样?

javascript - 动态添加子元素的事件监听器也标记为父元素

javascript - 在 Rails 中构建分析仪表板

Jquery Cycle activeClass 仅在点击导航后有效

html - Bootstrap 4 SCSS 覆盖不起作用

php - Apache 服务器: can't render php and html at once

javascript - 如何对 WebGL 着色器进行基准测试?

javascript - 找不到模块 : Error: Can't resolve 'css-loader'