动态复制某个字段
目标:当表单中的A个字段变化时,B字段自动跟随变化(与A相同)
- 情形1:表单A元素为多选框
<script type="text/javascript"> $(function(){ $("#selectId").change(function(){ //多选框的ID(由表单定义) var selected = $("#customer_id option:selected").text(); //获取选中的值 console.log("selected",selected); $("#fieldid").val(selected); //给文本框赋值 <input id ="fieldid"> }); }); </script>
- 情形2:表单元素为文本框
<script type="text/javascript"> $(function(){ $("#field1Id").change(function(){ var fieldValue = $("#field1Id").val(); $("#field2Id").val(fieldValue); //输入框禁用状态,也是可以修改其中的值 }); }); </script>
- 情形3:表单元素为Radio Button
<script type="text/javascript"> $(function(){ $("input[name='name']").change(function(){ //name 为实际表单元素name属性值 var checkedValue = $("input[name='name']:checked").val(); //获取选中的Radio Button $("#field2Id").val(checkedValue ); //给field2Id文本框赋值 }); }); </script>
动态拼接多个字段
<script>
$(function(){
//设置表单字段值
var setValue=function(fieldId,updateValue){
var e=FormUtil.getField(fieldId);
if(e.is('input')&&e.attr('type')&&e.attr('type')=='radio'){
if(updateValue&&(e.attr('value')==updateValue)){
e.attr('checked','checked');
}else{
e.removeAttr('checked');
}
}else if(e.is('input')&&e.attr('type')&&e.attr('type')=='checkbox'){
if(updateValue&&strInArr(e.attr('value'),updateValue.split(";"))){
e.attr('checked','checked');
}else{
e.removeAttr('checked');
}
}else if(e.is('select')){
$.each(e.find('option'),function(){
var opt=$(this);
if(updateValue&&strInArr(opt.attr('value'),updateValue.split(";"))){
opt.attr('selected','selected');
}else{
opt.removeAttr('selected');
}
});
setTimeout(function(){ e.trigger("change");e.trigger("chosen:updated"); }, 500);
}else{
e.val(updateValue);
}
}
//监听字段值的变化
FormUtil.getField('budgetYear').change(function(){
var val=FormUtil.getValue('budgetYear')+"-"+FormUtil.getValue('account_set_id');//自定义值
setValue('id',val);
});
FormUtil.getField('account_set_id').change(function(){
var val=FormUtil.getValue('budgetYear')+"-"+FormUtil.getValue('account_set_id');//自定义值
setValue('id',val);
});
//初始加载后触发监听事件
FormUtil.getField('budgetYear').change();
FormUtil.getField('account_set_id').change();
});
</script>
目标:当表单中字段A,B,C任一字段发生变化时,字段D自动拼接A,B,C三个字段
- 情形1:允许用户修改D字段
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".together").change(function(){ var a = $("#a").val(); var b = $("#b").val(); var c = $("#c").val(); var d = $("#d").val(); var adds = a + b + c; $("#d").val(adds ); }); }); </script> </head> <body> <p>在id 为a 的输入框改变时,id 为b 的输入框也改变值。</p> A:<input id="a" class="together" type="text" /> B:<input id="b" class="together" type="text" /> C:<input id="c" class="together" type="text" /> D:<input id="d" class="together" type="text" /> </body> </html>
- 情形2:不允许用户修改D字段
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".together").change(function(){ var a = $("#a").val(); var b = $("#b").val(); var c = $("#c").val(); var d = $("#d").val(); var adds = a + b + c; $("#d").val(adds ); }); }); </script> </head> <body> <p>在id 为a 的输入框改变时,id 为b 的输入框也改变值。</p> A:<input id="a" class="together" type="text" /> B:<input id="b" class="together" type="text" /> C:<input id="c" class="together" type="text" /> D:<input id="d" class="together" type="text" disabled = "disabled" /> </body> </html>
根据1个字段结果赋值
目标:当表单中A字段变化时,如果A等于x,则B字段值设为1,如果A等于y,则B字段值设为2,否则B字段值为3
- 情形1:允许用户修改B字段
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> //当表单中A字段变化时,如果A等于x,则B字段值设为1,如果A等于y,则B字段值设为2,否则B字段值为3 $(function(){ $("#a").change(function(){ var a = $("#a").val(); if(a=="x"){//数值不加引号 $("#b").val(1); }else if(a=="y"){ //数值不加引号 $("#b").val(2); }else{ $("#b").val(3); } }); }); </script> </head> <body> <p>在id 为a 的输入框改变时,id 为b 的输入框也改变值。</p> A:<input id="a" type="text" /> B:<input id="b" type="text" /> </body> </html>
- 情形2:不允许用户修改B字段
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> //当表单中A字段变化时,如果A等于x,则B字段值设为1,如果A等于y,则B字段值设为2,否则B字段值为3 $(function(){ $("#a").change(function(){ var a = $("#a").val(); if(a=="x"){//数值不加引号 $("#b").val(1); }else if(a=="y"){ //数值不加引号 $("#b").val(2); }else{ $("#b").val(3); } }); }); </script> </head> <body> <p>在id 为a 的输入框改变时,id 为b 的输入框也改变值。</p> A:<input id="a" type="text" /> B:<input id="b" type="text" disabled="disabled" /> </body> </html>