Skip to end of metadata
Go to start of metadata

动态复制某个字段

样例详情

目标：当表单中的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>