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>
ops-web运维平台-create.jsp-mootools下拉框-复选框,布布扣,bubuko.com