`
hideto
  • 浏览: 2683120 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE下不能disabled掉select标签的option的解决方案

阅读更多
原文:Select, Option, Disabled And The JavaScript Solution
今天在工作中需要用到disabled掉一些select的option,结果发现IE6没有实现它。
还好我们下载select-option-disabled-emulation.js文件即可自动完成disabled标记的工作,代码也很少:
/****************************************************************
* Author:	Alistair Lattimore
* Website:	http://www.lattimore.id.au/
* Contact:	http://www.lattimore.id.au/contact/
*			Errors, suggestions or comments
* Date:		30 June 2005
* Version:	1.0
* Purpose:	Emulate the disabled attributte for the <option> 
*			element in Internet Explorer.
* Use:		You are free to use this script in non-commercial
*			applications. You are however required to leave
*			this comment at the top of this file.
*
*			I'd love an email if you find a use for it on your 
*			site, though not required.
****************************************************************/

window.onload = function() {
	if (document.getElementsByTagName) {
		var s = document.getElementsByTagName("select");

		if (s.length > 0) {
			window.select_current = new Array();

			for (var i=0, select; select = s[i]; i++) {
				select.onfocus = function(){ window.select_current[this.id] = this.selectedIndex; }
				select.onchange = function(){ restore(this); }
				emulate(select);
			}
		}
	}
}

function restore(e) {
	if (e.options[e.selectedIndex].disabled) {
		e.selectedIndex = window.select_current[e.id];
	}
}

function emulate(e) {
	for (var i=0, option; option = e.options[i]; i++) {
		if (option.disabled) {
			option.style.color = "graytext";
		}
		else {
			option.style.color = "menutext";
		}
	}
}
分享到:
评论
1 楼 f0799 2009-09-22  
如果使用JS如$('s2')[index].disabled="disabled";js将不起作用

相关推荐

    IE6中select标签的option不能disabled的解决方案

    在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个众所周知的兼容性问题:`&lt;select&gt;`标签内的`&lt;option&gt;`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能,这对于...

    select-option-disabled-emulation.zip_OPTION_select option_select

    select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法~~~在页面加载时架子该js,呵呵有点问题:onchange 时间冲突 自己改改··

    select-disabled-传值

    本文详细介绍了一种在Web应用中使`select`下拉框变为只读状态但仍能正常传值的技术方案。具体包括了如何通过JSP和JavaScript动态控制`select`元素的`disabled`属性,以及如何在表单提交前解除该属性以确保数据能够...

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    这种方法的好处在于,即使`value`为空字符串,`a-select`也能正确地识别未选择状态,`placeholder`仍能正常工作,同时保持与后端接口的兼容性。 总之,当遇到`a-select`组件的`placeholder`在动态加载数据后失效的...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...

    HTML中Select不用Disabled实现ReadOnly的效果

    方法如下: 代码如下:&lt;select onbeforeactivate=”return false” onfocus=”this.blur()” onmouseover=”this.setCapture()” onmouseout=”this.releaseCapture()... &lt;option&gt;1&lt;/option&gt; &lt;/select&gt;

    bootstrap select 标签

    在 Bootstrap 中,`&lt;select&gt;` 标签通常是简单的单行下拉列表,样式相对单一。而 Bootstrap Select 插件通过引入 CSS 和 JavaScript 文件,可以将这些普通的下拉菜单转变为具有现代设计感的组件。这不仅改善了用户...

    jquery实现select互斥联动

    综上所述,jQuery实现的select互斥联动是一种常见的前端交互设计,通过监听和处理事件,动态调整下拉列表的选项,以满足不同场景下的用户需求。在理解基本原理后,可以根据具体项目需求进行扩展和优化。

    三级下拉列表 select 网页 html5

    这时,我们需要使用多个`&lt;select&gt;`标签,并通过JavaScript实现它们之间的联动。 1. **HTML结构**: 创建三个独立的`&lt;select&gt;`标签,每个代表一个级别。添加`id`属性以便于JS操作,并且在每个选项中添加特定的值,...

    html option禁用选择 select禁用选项示例

    在某些情况下,我们可能希望禁用某些选项,不让用户选择特定的值。例如,标题所示的问题就是如何在HTML中禁用`&lt;select&gt;`下拉列表中的3、4、5这三个选项。下面我们将详细讨论如何实现这个功能。 首先,我们可以直接...

    设置disabled属性后台读不到数据如何让select支持readonly

    为了解决这个问题,有两个常见的解决方案,这与题目中的描述相吻合。 1. **使用隐藏的`&lt;input type="hidden"&gt;`字段存储值**: 当你希望保持`&lt;select&gt;`元素不可更改但仍然需要其值在表单提交时被传递,可以创建一个...

    jQuery转换选择框为按钮的插件Select2Buttons.zip

    Select2Buttons是一个能将网页中的select选择框转换成一组按钮的插件。 主要功能特点: 转换select选择框为标签式按钮 支持js回发调用 支持disabled选项 支持将多个select设置为一组 支持取消默认...

    HP QC(Quality Center)在Windows 7 IE8 IE9下不能工作解决方案.doc

    总的来说,解决HP Quality Center在Windows 7及IE8/9环境下不能工作的关键在于关闭UAC和DEP,以及正确安装客户端组件。同时,对于特定错误,可能还需要手动安装或替换缺失的文件。通过这些步骤,用户通常能够恢复...

    js之Select用法

    总结,`select`元素在JavaScript中是不可或缺的一部分,尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理,可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...

    bootstrapselect下拉框js,css

    - **禁用与选中**:可以通过 `disabled` 属性禁用选项或整个下拉框,通过 `selected` 属性预设选中的选项。 - **事件监听**:可以绑定各种事件,如 `changed.bs.select` 事件来监听用户的选择变化。 4. **自定义...

    Bootstrap框架下下拉框select搜索功能

    为了解决这个问题,Bootstrap社区开发了一些插件,如`bootstrap-select`,它为下拉框添加了搜索功能。 `bootstrap-select`是一个基于Bootstrap的下拉框增强插件,它提供了丰富的自定义选项和交互性,包括搜索功能。...

    disabled属性

    ### disabled属性详解 在网页开发过程中,为了控制表单元素的状态与交互,`disabled`属性是一种非常实用且常见的工具。该属性主要用于HTML表单控件(如输入框、按钮等),用于禁用这些控件,使其无法进行用户交互,...

    css实现表单Select样式美化

    9. **Option样式**:虽然不能直接修改Option的样式,但我们可以通过JavaScript来动态创建Option元素并设置它们的样式,或者考虑使用其他HTML元素(如`&lt;li&gt;`)配合JavaScript模拟Select的功能。 10. **优化性能**:...

Global site tag (gtag.js) - Google Analytics