需求:
頁面默認顯示的時候為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