`

html中select只读显示

 
阅读更多

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

 

 

   

 

     

 

 

 

 

分享到:
评论
1 楼 痴心贼 2014-12-22  

相关推荐

    select下拉列表显示图片内容

    "select下拉列表显示图片内容"就是这样一个特例,它通过一些技术手段实现了在下拉选项中嵌入图片。 要实现这个效果,通常有以下几种方法: 1. **CSS和JavaScript**: 使用CSS来定制`&lt;option&gt;`元素的样式,并通过...

    用JavaScript来美化HTML的select标签的下拉列表效果

    5. 同步更新:无论是哪种方法,在用户选择了自定义下拉菜单中的某个选项后,需要同步更新原生select中的选中项,并且将选中项的值显示在自定义下拉菜单上。 下面,我们将进一步详细介绍用JavaScript来美化HTML的...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    总的来说,处理固定宽度下拉列表`&lt;select&gt;`中`&lt;option&gt;`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`&lt;select&gt;`元素的限制,然后根据需求选择最合适的解决方案,无论是使用现有...

    select下拉带模糊搜索功能

    当用户在搜索框中输入字符时,脚本会实时更新下拉列表,显示与输入最匹配的选项。这种实时反馈提升了用户体验,使用户能迅速找到目标选项。 在实现过程中,可能还涉及以下技术点: 1. **事件监听**:JavaScript需要...

    SelectBox下拉复选框多选插件

    在IT领域,尤其是在前端开发中,"SelectBox下拉复选框多选插件"是一种常用的用户界面元素,用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和...

    jsp中htmlselect标签的用法

    `jsp`中的`html:select`标签主要用于创建HTML表单中的下拉选择列表。这个标签在Struts框架中尤其常见,因为它与ActionForm对象的属性紧密关联,方便数据的提交和回显。以下是对`html:select`标签的详细解释和使用...

    bootstrap-select下拉选择搜索框,可以多选和单选

    Bootstrap Select是一款基于Bootstrap框架的插件,用于增强和美化HTML的`&lt;select&gt;`元素,提供了一个功能丰富的下拉选择器,其中包括搜索功能、多选和单选等特性。这款插件使得在网页交互中,用户可以更方便地进行...

    select 分组下拉菜单自定义样式

    在网页设计中,`select`元素常常用于创建下拉菜单,提供用户选择的选项。然而,浏览器默认的`select`样式通常较为简单,不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式,以实现更美观...

    select下拉选择不同状态

    可以设置背景色、边框色等,以改变下拉框内选项的视觉效果。 ```css .state1 { background-color: #ff0000; } .state2 { background-color: #00ff00; } ``` 3. **JavaScript交互**:为了让选择后的颜色和状态在...

    定制html的select标签样式

    在网页设计中,HTML的`&lt;select&gt;`标签用于创建下拉菜单,但其默认样式往往较为简单,不能满足设计师们对界面美观度的需求。本文将详细介绍如何通过自定义CSS和JavaScript来改变`&lt;select&gt;`标签的样式,打造更加个性化...

    select下拉多选框

    在网页设计和开发中,"select下拉多选框"是一种常见的用户界面元素,用于让用户在一组选项中选择一个或多个值。这个组件通常被称为`&lt;select&gt;`元素,当配合`multiple`属性时,它就能支持多选功能,即mulitselect。...

    实现select下拉选项可编辑

    根据标题“实现 select 下拉选项可编辑”以及描述中的相同内容,我们需要创建一个下拉菜单组件,它不仅能够显示预定义的选项供用户选择,还允许用户直接在文本框中输入值。此外,该组件应该具有一定的自定义功能,如...

    bootstrap-select下拉复选框.rar

    压缩包中的“下拉复选框”可能包含了示例代码、CSS样式、JavaScript文件和文档,帮助开发者快速理解和使用Bootstrap Select。通过研究这些文件,你可以更深入地了解如何配置和自定义插件,以满足项目需求。 总之,...

    select 增加搜索框

    在网页设计和开发中,`select`元素是HTML中用于创建下拉列表的标签,它提供了用户可以从一组预定义选项中进行选择的功能。然而,原始的`select`元素通常只提供基本的交互功能,比如点击打开下拉列表,然后选择一个...

    jquery实现select带模糊搜索下拉选择框

    这段代码会实时更新下拉列表,只显示包含当前搜索词的选项。 5. **初始化**: 如果你需要替换下拉内容,可以在页面加载完成后,动态添加 `option` 元素。例如: ```javascript $(document).ready(function() { ...

    JS中Select下拉列表类(支持输入模糊查询)功能

    当用户输入字符后,如果下拉列表中有匹配的选项,则显示在提示框中。用户可以通过上下箭头键来在匹配的选项间选择。 8. 跨浏览器兼容性:虽然示例代码中没有明确提到,但在实际开发中需要确保代码在不同的浏览器中...

    jquery select插件带搜索框的下拉选择框代码

    "jquery.searchableSelect"插件的工作原理是监听用户在搜索框中的输入,动态过滤下拉选项,只显示与输入匹配的项。这样,用户就可以快速找到他们想要选择的特定选项,而无需逐个滚动浏览。 值得注意的是,这个插件...

    div模拟select自定义下拉列表框(jQuery)

    总之,使用div模拟select自定义下拉列表框是网页开发中常见的技巧,它能够帮助开发者突破原生HTML元素的限制,实现更加灵活和个性化的交互设计。通过熟练掌握这一技术,可以提升网页的用户体验,增加网站的吸引力。

    select下拉查询支持中文

    在网页开发中,`select`元素常常用于创建下拉选择框,它允许用户从一系列预定义的选项中进行选择。然而,在中文环境下,确保`select`下拉查询能正确显示和处理中文字符是一项重要的任务。本篇文章将深入探讨如何实现...

Global site tag (gtag.js) - Google Analytics