HTML select 元素 disabled 后在 IE9 等浏览器中能正确显示

microblue 2012-04-05 07:45:00

如下示例代码：



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

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

在 IE 9 浏览器中的显示效果如下图：

如图所示，disabled 控件中 selected 的项没有被标示出来。但在 IE 10 浏览器中是正常的，如下所示：

更多的情况请参见： HTML select 元素 disabled 属性在主流浏览器中的表现。
有没有谁知道如何修改 HTML 源代码，以补救 IE 8、IE 9 和 Chrome 浏览器的相应 bug ?

...全文

626 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Acesidonu 2012-04-05

打赏
举报

也可以考虑隐藏了

乌镇程序员 2012-04-05

打赏
举报

[Quote=引用 6 楼的回复:]

使用 javascript 有个缺点，IE 浏览器会弹出一个对话框，说：Internet Explorer 已限制此网页运行脚本或 ActiveX 控件。需要点击“允许阻止的内容”按钮才行，否则还是不起作用。
[/Quote]

只有在本地浏览时才会有这个提示，放到服务器上通过http访问就不会了。

乌镇程序员 2012-04-05

打赏
举报

这样试试：

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

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

<style type="text/css">

option.selected {

	color:#FFF;

	background-color:#CCC;

}

</style>

<script type="text/javascript">

var obj = document.getElementsByTagName('select');

for (var i = 0; i < obj.length; i ++) {

	if (obj[i].disabled == true) {

		var opt = obj[i].getElementsByTagName('option');

		for (var j = 0; j < opt.length; j ++) {

			if (opt[j].selected == true) opt[j].className = 'selected';

		}

	}

}

</script>

 </body>

 </html>

Acesidonu 2012-04-05

打赏
举报

这个无所谓吧，已经禁用了也不会提交。如果不想看到就只好用js去掉selected。

孟子E章 2012-04-05

打赏
举报

用js把 selected="selected"去掉吧

microblue 2012-04-05

打赏
举报

不知道有没有可能不用 javascript，只有 css 来解决这个问题。

microblue 2012-04-05

打赏
举报

使用 javascript 有个缺点，IE 浏览器会弹出一个对话框，说：Internet Explorer 已限制此网页运行脚本或 ActiveX 控件。需要点击“允许阻止的内容”按钮才行，否则还是不起作用。

microblue 2012-04-05

打赏
举报

三楼的代码有效。我整理了一下，如下所示：



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

  <script type="text/javascript" src="Main.js"></script>

</body>

</html>



option.selected {

  color:#FFF;

  background-color:#CCC;

}



var obj = document.getElementsByTagName('select');

for (var i = 0; i < obj.length; i ++)

  if (obj[i].disabled == true) {

    var opt = obj[i].getElementsByTagName('option');

    for (var j = 0; j < opt.length; j ++)

      if (opt[j].selected == true) opt[j].className = 'selected';

  }