下面在代码中演示了在SpringMVC+Mybatis框架下前台页面如何处理下拉列表 选中的提交与回写,复选框的选中项提交与回写。
<form id="updatePartumForm" action="/today/updatePartum">
<ul class="message-list">
<input type="hidden" name="uid" value="${user.uid}">
<input type="hidden" name="postPartumInfo.pid" value="${user.postPartumInfo.pid}">
<li>
<!--此下拉列表的赋值在底下用jquery实现-->
<div>
<span class="left">访视单位:</span>
<select name="visitUnit" class="right" id="visitUnit">
<option value="1">单位1</option>
<option value="2">单位2</option>
<option value="3">单位3</option>
<option value="4">单位4</option>
<option value="5">单位5</option>
</select>
</div>
</li>
<li>
<!--此checkbox赋值与回写在底下用jquery实现,每点击一次触发getpD()函数,拼接字符串传给隐藏的变量,点击提交后然后返回给后台的对象(SpringMVC)-->
<div class="date-list">
<span class="left">产妇妊娠期患病情况:</span>
<input type="hidden" id="returnpD" name="postPartumInfo.pDisease" value="${user.postPartumInfo.pDisease}" >
<input type="checkbox" name="d" class="checkbox-input" value="1" onchange="getpD()">糖尿病
<input type="checkbox" name="d" class="checkbox-input" value="2" onchange="getpD()">妊娠期高血压
<input type="checkbox" name="d" class="checkbox-input" value="3" onchange="getpD()">其他
</div>
</li>
<li>
<div>
<span class="left">满意度:</span>
<span class="right">满意</span>
</div>
</li>
</ul>
<input type="submit" class="submit" value ="提交->">
</form>
</div>
<script src="/resources/js/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/resources/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#visitUnit').val(${user.visitUnit});
var p = "${user.postPartumInfo.pDisease}".split(",");
$.each(p, function(index, val) {
$(":checkbox[name='d'][value="+val+"]").prop("checked",true);
});
});
function getpD(){
var bb = "";
var temp = "";
var a = $('input[name="d"]');
for ( var i = 0; i < a.length; i++) {
if (a[i].checked) {
temp = a[i].value;
bb = bb + "," +temp;
}
}
$("#returnpD").attr("value",bb.substring(1, bb.length));
}
</script>