根据下拉选项显示/隐藏 某些字段(select上绑定onchange事件)
2017-05-23 19:35
543 查看
今天做了一张表单,有个小需求。下面支付方式有两种,当是银行存款的时候,页面是当前这样的,当是货存现金的时候,下面的“收款方户名”、“收款方银行账号”、“收款方开户行”。思路有几种,这里只列举一种简单的。
我采用的是onchange事件,找到selecr的id,这里是:(本框架path属性同id)
<c:if test="${claim.status=='DRAFT'}">
<form:select path="payTypeName" class="form-control" >
<form:option value="银行存款" label="银行存款"></form:option>
<form:option value="库存现金" label="库存现金"></form:option>
</form:select>
</c:if>
在页面刚加载的时候,写:
$('#payTypeName').change(function(){
var optionContent= $(this).children('option:selected').val();
if(optionContent=="库存现金"){
$("#acc_name").css("display","none");
$("#pay_ReceiveObjBankAcc").css("display","none");
$("#pay_ReceiveObjBank").css("display","none");
}if(optionContent=="银行存款"){
$("#acc_name").css("display","");
$("#pay_ReceiveObjBankAcc").css("display","");
$("#pay_ReceiveObjBank").css("display","");
}
});
放在$(document).ready(function(){}内!!
我采用的是onchange事件,找到selecr的id,这里是:(本框架path属性同id)
<c:if test="${claim.status=='DRAFT'}">
<form:select path="payTypeName" class="form-control" >
<form:option value="银行存款" label="银行存款"></form:option>
<form:option value="库存现金" label="库存现金"></form:option>
</form:select>
</c:if>
在页面刚加载的时候,写:
$('#payTypeName').change(function(){
var optionContent= $(this).children('option:selected').val();
if(optionContent=="库存现金"){
$("#acc_name").css("display","none");
$("#pay_ReceiveObjBankAcc").css("display","none");
$("#pay_ReceiveObjBank").css("display","none");
}if(optionContent=="银行存款"){
$("#acc_name").css("display","");
$("#pay_ReceiveObjBankAcc").css("display","");
$("#pay_ReceiveObjBank").css("display","");
}
});
放在$(document).ready(function(){}内!!
相关文章推荐
- 第一次提问题--根据dropdownlist 的选择而动态显示或隐藏GridView的某些字段!!
- select获取当前值,改变默认选项以及绑定onchange事件
- 根据传入值,自动显示标签 select 下拉选项
- 【JSP页面】如何根据Select的选项来决定页面input的显示隐藏
- javascript 根据select所选项的不同显示和隐藏部分内容
- jsp中 根据传入值,采用javascript自动显示标签下拉选项
- select 下拉框--- 根据返回值显示值
- JQUERY显示隐藏的点击绑定事件
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- 根据CheckBoxList选项显示隐藏DIV并保存状态
- JQuery 绑定select标签的onchange事件
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- 根据下拉框选项判断是否隐藏文本框信息
- GridView控件常见问题及处理方法===1. 关于隐藏字段的处理:==2. 关于按钮列的事件:==3. 关于按钮的客户端提示:==4. 关于时间字段的格式化输出:==5. 关于绑定空记录:
- select 下拉框--- 根据返回值显示值
- JQuery动态修改select标签的内容,并绑定onchange事件,弹出选择的值
- JQuery 绑定select标签的onchange事件
- select onchange事件控制tr的显示或隐藏
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select