????? 因为Select下拉框只支持disabled属性,不支持readOnly属性,而在提交时,disabled的控件,又是不提交值的。现提供以下几种解决方案:
??????? 1、在html中使用以下代码,在select外层加1个span,通过js控制。这种设置的不足之处是IE浏览器兼容,fireFox及其他不兼容..
?
<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文件,这种方法的不足之处和第一种一样。
?
???????
<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方式解决。
?
$(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。
????? 补救办法:
??????
<!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 如下所示:
???
option.selected {
color: White;
background-color: Cyan;
}
??? 其他改变样式,使用CSS改变文字颜色
???
用 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>
<inp