窗体-通过在select标记中选择一个选项来显示隐藏字段
Forms - Show a hidden field by selecting an option in the select tag
好的,我的表单中有这个选择区域,还有一个名为"插入产品编号"的隐藏字段。我想做的是:如果用户选择"产品"选项,隐藏字段将显示在选择字段的正下方。我该怎么做?谢谢
<select>
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
<select id="types">
<option value="1">Jobs</option>
<option value="2">Products</option>
<option value="3">Other</option>
</select>
<input type="text" id="products" placeholder="Insert product number" style="display:none"/>
<script type="text/javascript">
$(document).ready(function(){
$("#types").change(function(){
var type = $(this).val();
if(type == "2"){
$("#products").show();
}else{
$("#products").hide();
}
});
});
</script>
注意:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
添加jquery库
您需要检查选择框的选定值。
<select id="ddlSelect">
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
<input type="text" id="hdnPro" value="product" style='display:none'/>
$('#ddlSelect').on('change',function(){
if($(this).val() == 'Products'){
$('#hdnPro').show();
}else{
$('#hdnPro').hide();
}
});
DEMO
相关文章:
- 无法在Ionic select中预先选择最后一个选项
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- AngularJS ng选项在选择一个选项后删除了默认的空白值
- 在下拉列表中选择一个选项的值
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- HTML-从mysql生成的选择框中的一个选项更改文本区域的颜色
- 打开一个选项卡,并在firefox网络扩展中向其发出POST请求
- 链接到手风琴中的另一个选项卡,嵌入的链接将不起作用
- 如何将数组附加到下拉导航栏并禁用其中的一个选项
- 尝试添加一个选项以使用append进行选择,但没有任何结果
- 在dojo中将数据从一个选项卡绑定到另一个选项卡(打开选项卡?)
- 单击按钮进入下一个选项卡,而不是单击选项卡
- PHP Jquery选项卡:内容加载到一个选项卡's面板
- 对添加另一个选项卡的onsubmit函数停止重定向
- 用CSS和Javascript创建一个选项卡系统
- 在下拉列表中的页面加载中已经选择了一个选项,该选项也可以更改
- jQuery UI 选项卡取消选择事件或在选择时保存上一个选项卡
- 单击链接时添加另一个选项
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- jQuery - 根据标识符获取下一个选项的总值