因为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>

    <input type="text" />

  </div>

</body>

</html>

     5、使用隐藏域，在select下面设置隐藏域，显示的时候disabled,提交的时候提交隐藏域中的值。

<!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>

     还有下面的一种情况，页面数据太多，处理时间较长

<!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>

今天在网上看到select的只读问题，第一反应是readonly，后来发现select 没有readonly，因此去网上查了一下。发现有以下解决方案:

HTML中的select只读的更多相关文章

  1. 设置SQLServer数据库中某些表为只读的多种方法

    原文:设置SQLServer数据库中某些表为只读的多种方法 翻译自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...

  2. mysql: update字段中带select

    update字段中带select UPDATE tb_report_type A INNER JOIN (SELECT LEVEL_CODE FROM tb_report_type WHERE id ...

  3. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  4. Access中的SELECT @@IDENTITY

    在Access数据库中存在select @@identity吗?答案是肯定的.但是Access一次只能执行一条SQL,多条SQL需要多次执行,这是限制.在SQL Server中,可以一次执行多条SQL ...

  5. 2.3 LINQ查询表达式中 使用select子句 指定目标数据

    本篇讲解LINQ查询的三种形式: 查询对象 自定义查询对象某个属性 查询匿名类型结果 [1.查询结果返回集合元素] 在LINQ查询中,select子句和from子句都是必备子句.LINQ查询表达式必须 ...

  6. python中的select模块

    介绍: Python中的select模块专注于I/O多路复用,提供了select  poll  epoll三个方法(其中后两个在Linux中可用,windows仅支持select),另外也提供了kqu ...

  7. 存储过程中使用select……into

    在MySQL存储过程中使用SELECT -INTO语句为变量赋值: 用来将查询返回的一行的各个列值保存到局部变量中. 要求: 查询的结果集中只能有1行. SELECT col_name[,...] I ...

  8. I/O复用中的 select poll 和 epoll

    I/O复用中的 select poll 和 epoll: 这里有一些不错的资料: I/O多路复用技术之select模型: http://blog.csdn.net/nk_test/article/de ...

  9. MySQL在字段中使用select子查询

    前几天看别人的代码中看到在字段中使用select子查询的方法,第一次见这种写法,然后研究了一下,记录下来 大概的形式是这样的: select a .*,(select b.another_field ...

随机推荐

  1. djangocms安装技巧

    首先python的版本要高一些,否则安装django-cms会报错 安装cmsinstaller不能够正常下载 利用virtualenv进行安装配置 注意中文的配置 djangocms配置中文 dja ...

  2. bate阶段项目总结

    Beta里程碑总结 设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 要解决的问题是如何实现消息的发布与查看以及个人主页的实现:定义的基本清楚,团队 ...

  3. 实现table的单线边框的办法

    实现table的单线边框的办法 现在给出效果图: 1.实现方法一:    <table border="0" cellspacing="1" style= ...

  4. spring+redis

    配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www ...

  5. PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第四组(转)

    十:联机处理-可选项终端根据卡片行为分析的结果,执行对应的处理.若卡片响应联机,则终端发起联机操作.联机处理使得发卡行后台可以根据基于后台的风险管理参数检查并授权批准或拒绝交易.除了传统的联机欺诈和信 ...

  6. Dev Express 动态生成XRTable使用总结

    1. XRTableCell常见属性  XRTableCell xrTableCell = new XRTableCell(); A. 字体及字体大小 xrTableCell.Font = new S ...

  7. 反射(Reflection)

    反射主要用于在程序运行期间动态解析相关类的类名,命名空间,属性,方法并进行相应操作,以下通过两个简单的例子进行了说明: 示例1:调用程序集内部方法,运行时动态获取相关类的信息,包括类名,命名空间等信息 ...

  8. oralce 密码长度

    Oracle 11G的新特性所致, Oracle 11G创建用户时缺省密码过期限制是180天, 如果超过180天用户密码未做修改则该用户无法登录. Oracle提示错误消息ORA-28001: the ...

  9. SAP播放本地视频及音频(仅限于window MediaPlayer可播放文件)

    这个是从SCN上看到的,自己稍加修改,编制,做的还可以,可以播放视频,音频,唯一的不足就是不能控制播放视频的显示窗口大小,希望有人能帮忙解决,感激! 视频播放类:(新建类Z_CL_MEDIA,点击基于 ...

  10. Z表数据EXCEL导入

    很多项目都有这种需求,虽然别人用的各有不同,不过闲来无事,还是自己搞了一个出来.基于EXCEL的导入. *&------------------------------------------ ...