textarea、radio,checkbox以及option的取值和赋值

本文介绍如何将后台获取的数据正确填充到HTML表单元素中,包括textarea、radio按钮、checkbox及下拉列表等,通过实例展示了不同元素的值设置方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、textarea标签不像text标签,它没有value的属性,所以从后台查询到值,传递给textarea标签,需要借助hidden隐藏域,具体思路是,将后台查询到的值赋给隐藏域,再将隐藏域的值传递给textarea标签。示例:
   <tr height="50">
<td>其它</td>
<td colspan="3">
           <textarea name="symptomOther" id="symptomOther" class="easyui-validatebox"  onkeyup="LimitTextArea(this,100)" onkeydown="LimitTextArea(this,100)"style="height:50px;width:575px">
      </textarea>
       </td>
  <td>  <input type="hidden" name="symptomOthers" id="symptomOther2" value="${detail.symptomOther}"/> </td>   < !--此外构造隐藏域,并将值赋给它-->
 </tr>
js:document.getElementById("symptomOther").value=document.getElementById("symptomOther2").value;  

2、将后台获取的值赋给radion标签,同样的思路,也是借助hidden隐藏域:
<td>随访方式</td>
  <td>  <label><input type="radio" name="flupType" value="1" />门诊</label>
   &nbsp;&nbsp;&nbsp;
           <label><input type="radio" name="flupType" value="2" />家庭</label>
  &nbsp;&nbsp;&nbsp;
<label><input type="radio" name="flupType" value="3" />电话</label>
</td>
<input type="hidden" id="flupType" name="flupType" value="${detail.flupType}"/>  < !--此外构造隐藏域,并将值赋给它-->
js: var flupTypeVal=document.getElementById("flupType").value;
    $("input[name='flupType'][value="+flupTypeVal+"]").attr("checked",'checked');


3、后台获取checkbox所有选中的值,用数组接收:


    String[] zhengz=request.getParameterValues("zhengz"); //数组用getParameterValues方法获取所有选中值
    String zhengzVal="";
     for(int i =0;i<zhengz.length;i++) //对checkbox进行遍历  
{  
     zhengzVal+=zhengz[i]+",";  
  }  
zhengzVal=zhengzVal.substring(0,zhengzVal.length()-1);   //截取掉最后一个逗号 
然后赋值给对象:detail.setZhengz(zhengzVal);


将后台查询到值赋给前端checkbox:
<tr>
<td width="120"><input type="checkbox" name="zhengz" value="1" />无症状</td>
<td width="120" nowrap="nowrap"><input type="checkbox" name="zhengz" value="2" />头痛头晕</td>
<td width="120"><label><input type="checkbox" name="zhengz" value="3" />恶心呕吐</label></td>
<td width="120"><input type="checkbox" name="zhengz" value="4" />眼花耳鸣</td>
<td><label><input type="checkbox" name="zhengz" value="5" />呼吸困难</label></td>
</tr>

js:        var zhengzVal=document.getElementById("zhengz").value.split(",");
$.each(zhengzVal, function(index, val) {
            $(":checkbox[name='zhengz'][value="+val+"]").prop("checked",true);
        });

4、后台将值传至前端,设备下拉选框对应的选中值:

            var national="${record.national}";
var select = document.getElementById("national");  
for(var i=0; i<select.options.length; i++){  
    if(select.options[i].value == national){  
        select.options[i].selected = true;  
        break;  
    }  
}  
});

页面代码:

    <select id="national" name="national" style="width: 100px;">
<option value="">请选择</option>
<option value="01" >汉族</option>

         ........

   </select>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值