因為Select下拉框只支持disabled屬性，不支持readOnly屬性，而在提交時，disabled的控件，又是不提交值的�，F(xiàn)提供以下幾種解決方案：
1、在html中使用以下代碼,在select外層加1個span,通過js控制。這種設置的不足之處是IE瀏覽器兼容，fireFox及其他不兼容..
Html代碼 收藏代碼
<span onmousemove="this.setCapture();"onmouseout="this.releaseCapture();" onfocus="this.blur();">
<select id="select1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</span>
2、使用js文件，這種方法的不足之處和第一種一樣。
Js代碼 收藏代碼
<select name="select">
<option>aaa</option>
</select>
<script type="text/javascript">
SetReadOnly(document.getElementById("select"));
function SetReadOnly(obj){
if(obj){
obj.onbeforeactivate = function(){return false;};
obj.onfocus = function(){obj.blur();};
obj.onmouseover = function(){obj.setCapture();};
obj.onmouseout = function(){obj.releaseCapture();};
}
}
</script>
3、使用jquery方式解決。
Java代碼 收藏代碼
$(function(){ $("select").attr("disabled", "disabled");
//如果和jquery1.6以上版本，可以使用以下語句：
$("select").prop("disabled", true);});
4、先將select的屬性設置為
disabled="disabled"
然后在提交表單的時候使用disabled置為空。
Microsoft IE 5.5、IE 6、IE7、IE 10、Mozilla Firefox、Apple Safari 和 Opera 等瀏覽器對 HTML select 元素的 disabled 屬性支持都很不錯。而 IE 8、IE 9 和 Chrome 都有 bug，不能很好支持。不知道有沒有辦法在 HTML 源代碼補救這一 bug。
補救辦法：
Html代碼 收藏代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="Main.css" type="text/css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<select size="5" disabled="disabled">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected" class="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<select size="5">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<input type="text" />
</div>
</body>
</html>
其中 Main.css 如下所示：
Html代碼 收藏代碼
option.selected {
color: White;
background-color: Cyan;
}
其他改變樣式，使用CSS改變文字顏色
Html代碼 收藏代碼
用 CSS 定義文字顏色如下代碼所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css"> select { color:red } </style>
<title>Test</title>
</head>
<body>
<div>
<select size="5" disabled="disabled">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<select size="5">
<option value="C1">Black</option>
<option value="C2">DarkCyan</option>
<option value="C3" selected="selected">DarkRed</option>
<option value="C4">DarkMagenta</option>
</select>
<input type="text" />
</div>
</body>
</html>
5、使用隱藏域，在select下面設置隱藏域，顯示的時候disabled,提交的時候提交隱藏域中的值。
Html代碼 收藏代碼
<!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">
<body>
<select id="selList" onchange="setVal()">
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
</select>
<input id="hdSelList" type="text" />
<script type="text/javascript">
//本demo是為了清晰地表達, 你在select中加入 disabled="disabled",
//將input中的type改為hidden即為你要的效果了.
//提交時, 你不要取selList的值, 取hdSelList的值就好了.
setVal(); //1.在初始加載時就將兩者的值設置為一致;
//2. 為了防止代碼以后會有改動---有時不需要disabled, 故有上面的onchange="setVal()"
function setVal() {
document.getElementById('hdSelList').value = document.getElementById('selList').value;
}
</script>
</body>
</html>
還有下面的一種情況，頁面數(shù)據(jù)太多，處理時間較長
Html代碼 收藏代碼
<!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>
<script src="../ec/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
function commit() {
$DisSelects = $("select[disabled='disabled']");//獲取所有被禁用的select
$DisSelects.attr("disabled", false); //處理之前, 全部打開
$("#form1").submit(); //提交
$DisSelects.attr("disabled", true); //處理完成, 全部禁用
}
</script>
</head>
<body>
<form id="form1" action="HTMLPage.htm">
<input type="button" value="submit" onclick="commit()" />
<select id="Select1" disabled="disabled" >
<option value="0" >0</option>
<option value="1" selected="selected">1</option>
</select>
<select id="Select2" disabled="disabled" >
<option value="1" >1</option>
<option value="2" selected="selected">2</option>
</select>
<select id="Select3" disabled="disabled" >
<option value="2" >2</option>
<option value="3" selected="selected">3</option>
</select>
<select id="Select4" disabled="disabled" >
<option value="3" >3</option>
<option value="4" selected="selected">4</option>
</select>
</form>
</body>
</html>
