因为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>
相关推荐
div+css打造select下拉菜单,可自己修改相应样式!!!
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
61、<option> 定义下拉列表中的选项。 62、<output> 定义输出的一些类型。 63、<p> 定义段落。 64、<param> 为对象定义参数。 65、<pre> 定义预格式化文本。 66、<progress> 定义任何类型的任务的进度。 67、<q> ...
学习表单的核心就是学习表单控件,HTML语言提供了一系列的表单控件,用于定义不同的表单功能,如密码输入框、文本域、下拉列表、复选框等。 表单控件 表单控件常用在登录和注册模块 表单控件 大致可分为input控件、...
本文介绍了iview实现select tree树形下拉框的示例代码,分享给大家,具体如下: html部分 <Tree data=treeData ref=tree render=renderContent></Tree> 数据部分 export const treeData= [ { title: 'parent 1...
主要介绍了jQuery模拟html下拉多选框的原生实现方法,结合完整实例形式分析了jQuery动态操作页面元素实现select下拉框效果的相关操作技巧,需要的朋友可以参考下
2、显示在自己的网页中 3、超链接 1、语法 标记:内容 属性: 1、href : 要链接的HTML页面URL 2、target : 目标,指定新网页的打开形式 取值: 1、_blank : 在新标签页中打开网页 2、_self : 在自身标签页...
最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的...
13.7.html 在HTML中显示XML数据。 13.8.html JavaScript操作XML数据岛。 13.9.jsp JavaScript+XML实现通讯录。 addressbook.war JavaScript+XML实现通讯录的工程文件(可以直接在Tomcat下发布运行)...
要用到前面几节学习过的单行文本输入框text、下拉列表框select、密码输入框password、多行文本输入框textarea。这是一个较实用的用户注册表单.。 register.html: 代码如下: <!doctype html> <htm
当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中,下面有个不错的示例,希望朋友们可以喜欢
40. 把复选框中选中的值直接显示在输入文本框中? 41. 选择路径下的文件直接显示文件内容? 42. 制作进度条? 43. 对较长字符省略显示? 44. 制作日历? 45. 点击文本弹出一个选择框,选中值后返回并显示 46. 关闭框架...
显示处理于一体的JSP标签,其中有: 编码拦截器工具类 数据表格(DBTable)标签 时间日期(DateOrTime)标签 组合选择框(selectDouble)标签 下拉选择框(select)标签 树形菜单(TreeDB)标签<不带...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容。为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示。使用了一个jQ插件:imageselect.js...
6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab...
6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab...
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
第一个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table,并把源tr克隆到...