原文:
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";
}
}
}
分享到:
相关推荐
在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个众所周知的兼容性问题:`<select>`标签内的`<option>`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能,这对于...
select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法~~~在页面加载时架子该js,呵呵有点问题:onchange 时间冲突 自己改改··
本文详细介绍了一种在Web应用中使`select`下拉框变为只读状态但仍能正常传值的技术方案。具体包括了如何通过JSP和JavaScript动态控制`select`元素的`disabled`属性,以及如何在表单提交前解除该属性以确保数据能够...
这种方法的好处在于,即使`value`为空字符串,`a-select`也能正确地识别未选择状态,`placeholder`仍能正常工作,同时保持与后端接口的兼容性。 总之,当遇到`a-select`组件的`placeholder`在动态加载数据后失效的...
在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...
方法如下: 代码如下:<select onbeforeactivate=”return false” onfocus=”this.blur()” onmouseover=”this.setCapture()” onmouseout=”this.releaseCapture()... <option>1</option> </select>
在 Bootstrap 中,`<select>` 标签通常是简单的单行下拉列表,样式相对单一。而 Bootstrap Select 插件通过引入 CSS 和 JavaScript 文件,可以将这些普通的下拉菜单转变为具有现代设计感的组件。这不仅改善了用户...
综上所述,jQuery实现的select互斥联动是一种常见的前端交互设计,通过监听和处理事件,动态调整下拉列表的选项,以满足不同场景下的用户需求。在理解基本原理后,可以根据具体项目需求进行扩展和优化。
这时,我们需要使用多个`<select>`标签,并通过JavaScript实现它们之间的联动。 1. **HTML结构**: 创建三个独立的`<select>`标签,每个代表一个级别。添加`id`属性以便于JS操作,并且在每个选项中添加特定的值,...
在某些情况下,我们可能希望禁用某些选项,不让用户选择特定的值。例如,标题所示的问题就是如何在HTML中禁用`<select>`下拉列表中的3、4、5这三个选项。下面我们将详细讨论如何实现这个功能。 首先,我们可以直接...
为了解决这个问题,有两个常见的解决方案,这与题目中的描述相吻合。 1. **使用隐藏的`<input type="hidden">`字段存储值**: 当你希望保持`<select>`元素不可更改但仍然需要其值在表单提交时被传递,可以创建一个...
Select2Buttons是一个能将网页中的select选择框转换成一组按钮的插件。 主要功能特点: 转换select选择框为标签式按钮 支持js回发调用 支持disabled选项 支持将多个select设置为一组 支持取消默认...
总的来说,解决HP Quality Center在Windows 7及IE8/9环境下不能工作的关键在于关闭UAC和DEP,以及正确安装客户端组件。同时,对于特定错误,可能还需要手动安装或替换缺失的文件。通过这些步骤,用户通常能够恢复...
总结,`select`元素在JavaScript中是不可或缺的一部分,尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理,可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...
- **禁用与选中**:可以通过 `disabled` 属性禁用选项或整个下拉框,通过 `selected` 属性预设选中的选项。 - **事件监听**:可以绑定各种事件,如 `changed.bs.select` 事件来监听用户的选择变化。 4. **自定义...
为了解决这个问题,Bootstrap社区开发了一些插件,如`bootstrap-select`,它为下拉框添加了搜索功能。 `bootstrap-select`是一个基于Bootstrap的下拉框增强插件,它提供了丰富的自定义选项和交互性,包括搜索功能。...
### disabled属性详解 在网页开发过程中,为了控制表单元素的状态与交互,`disabled`属性是一种非常实用且常见的工具。该属性主要用于HTML表单控件(如输入框、按钮等),用于禁用这些控件,使其无法进行用户交互,...
9. **Option样式**:虽然不能直接修改Option的样式,但我们可以通过JavaScript来动态创建Option元素并设置它们的样式,或者考虑使用其他HTML元素(如`<li>`)配合JavaScript模拟Select的功能。 10. **优化性能**:...