<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>SELECT element</title>
<style type="text/css">
#dataText { font: 12px 宋体; width: 160px; }
#dataSelect { font: 12px 宋体; width: 160px; }
.hidden { display: none; }
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
$('modeBtn').className = '';
// modeBtn 按钮用于切换 编辑/查看 模式。
// 当前模式记录在不可见元素 mode 中。
$('modeBtn').onclick = function () {
if ($('mode').innerHTML == 'view') {
// 转换到编辑模式。
$('dataSelect').value = $('data').value;
$('mode').innerHTML = 'edit';
$('modeBtn').value = '提交';
$('data').className = 'hidden';
$('dataSelect').className = '';
}
else {
// 提交数据
$('data').value = $('dataSelect').value;
// 转换到查看模式。
$('mode').innerHTML = 'view';
$('modeBtn').value = '编辑';
$('data').className = '';
$('dataSelect').className = 'hidden';
}
};
};
</script>
</head>
<body>
<form id="testForm" action="#" method="post">
<div id="mode" class="hidden">view</div>
<input type="text" readonly="readonly" id="data" value="White" style="width: 160px" />
<select id="dataSelect" class="hidden">
<option value="-">(None)</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="White">White</option>
</select>
<input type="button" id="modeBtn" value="编辑" />
</form>
</body>
</html>
