create.jsp页面的，body部分
<body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},true)"> <div id="title">${pageTitle}</div> <s:form id="MYFORM" action="%{pageAction}" method="post" theme="simple"> <div id="content"> <table> <!-- 仅仅是一个例子--> <tr> <th width="13%">设备所有权类型:</th> <td width="35%"> <s:select name="deviceInfo.owenerType" id="ownerType" list="owenerTypeList" listKey="realValue" listValue="displayValue" headerKey="" headerValue="请选择"/> </td> </tr> <tr > <td colspan="4" width="100%"> </td> </tr> <tr > <th width="13%">设备类型-模块信息</th> <td id="modelpart" colspan="3" > </td> </tr> </table> </div> <div id="operator"> <div class="left"></div> <div class="middle" onclick="Page.submit()">提交</div> <div class="right"></div> <div class="left"></div> <div class="middle" onclick="Page.close()">关闭</div> <div class="right"></div> </div> </s:form> </body>
js-mootools框架-实现的功能：
根据下拉框选中的类型，生成复选框，放到<td id="modelpart" colspan="3" > </td>里面
head部分的 javascript，是mootools实现的
<script type="text/javascript" >
window.addEvent('domready', function(){
/**
* 对于选中下拉框进行ajax异步请求的操作
*/
//这个是获取到 设备类型 隐藏域字段
$$("#content #ownerType").addEvent('change',function(event){
if($(this).value==""){
//清空元素
var td=$$("#content tr #modelpart");
td.set("html","")
return;
}else{
var jsonRequest = new Request.JSON({
url: 'deviceinfo!loadDeviceModelByType.jspa',
onSuccess: function(responseJSON, responseText){
var td=$$("#content tr #modelpart");
td.set("html",""); //清空子元素
responseJSON.each(function(item,index){
//生成checkbox
var checkbox=new Element('input',{id:"checkbox"+index,type:"checkbox", "class":"checkbox" ,checked:"true"});
//追加到 td中 //括号里面是当前元素
var label=new Element("label",{"for":"checkbox"+index,text:item.displayValue+" "});
td.adopt(checkbox); //这才是追加元素的方式
td.adopt(label);
});
},
onFailure: function(xhr){
alert(xhr);
}
}).post({'deviceType': '1'});
}
});
});
</script>
