表单 - 通过 selecting select 标签中的选项显示隐藏字段
Forms - Show a hidden field by selecting an option in the select tag
好的,我的表单中有这个 select 区域,还有一个名为 "insert product number" 的隐藏字段。我想要做的是:如果用户 select 选择 "product" 选项,隐藏字段将显示在 selection 字段的正下方。我怎样才能做到这一点?谢谢!
<select>
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
您需要检查 select 框的 selected 值。
<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();
}
});
<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 区域,还有一个名为 "insert product number" 的隐藏字段。我想要做的是:如果用户 select 选择 "product" 选项,隐藏字段将显示在 selection 字段的正下方。我怎样才能做到这一点?谢谢!
<select>
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
您需要检查 select 框的 selected 值。
<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();
}
});
<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库