需求:
页面默认显示的时候为label,
当鼠标点击上后,显示为select选择框,容许选择
实现
1.javascript函数:
function makeSelectEnabled(_node){
var selects = _node.getElementsByTagName("select");
var labels = _node.getElementsByTagName("label");
var spans = _node.getElementsByTagName("span");
if(spans.length > 0){
spans[0].style.padding = "0px";
spans[0].parentNode.style.paddingTop = "0px";
spans[0].parentNode.style.paddingBottom = "0px";
}
if(selects.length > 0 && labels.length > 0){
labels[0].innerHTML = "";
selects[0].style.display = "block";
selects[0].focus();
selects[0].onblur = function(){
labels[0].appendChild(_createTextNode(this.value));
this.style.display="none";
}
}
}
2. jsp页面使用(s标签为struts2标签)
<tr>
<th>Log level</th>
<td onclick="makeSelectEnabled(this)" class="editThisAttribute">
<span>
<s:label key="mozartManagerConf.mangerLogLevel" />
<s:select id="mangerLogLevel"
cssStyle="display:none" list="logLevelList"
name="xxxx.LogLevel"
value="xxx.mangerLogLevel"
headerKey="" headerValue="" />
</span>
</td>
</tr>
注意:
1.使用struts2的标签select显示下拉列表
list对应的
logLevelList为下拉数据,value="mozartManagerConf.mangerLogLevel" 为当前显示数据
2.在构造函数中填充logLevelList(每次请求都会重新初始化一个Action实例)
3.具体实例可以参见struts2-showCase