select 在各浏览器中显示option的测试结果分享

原网址:http://www.jb51.net/css/76690.html

使用select的范例在ie8时显示出问题，ie7下直接显示不了option，经过查资料将其兼容了，这里记录一下，感兴趣的朋友可以参考下哈，希望可以帮助到你

方法1：
代码如下：
<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.add(new Option("A"));
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html>

测试结果：Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。

方法2：

<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.appendChild(new Option("B"));
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html>

测试结果：Firefox、Chrome、Safari、Opera显示正常，IE9、IE8、IE7下不能显示。　　

方法3：

代码如下： 复制代码代码如下:<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.add(new Option("A"));
s.insertBefore(new Option("B"), s.options[1]);
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html> 测试结果：Firefox、Chrome、Safari、Opera显示正常，IE9、IE8、IE7下不能显示。
方法4：
将方法3的insertBefore第二个参数去掉，也就是说我们第一个option就想使用insertBefore时，看一下情况： 复制代码代码如下:<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.insertBefore(new Option("D"));
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html> 测试结果：Chrome、Safari显示正常，Firefox、IE9、IE8、IE7、Opera下不能显示。
方法5：
代码如下： 复制代码代码如下:<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.options[0] = new Option("E");
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html> 测试结果：Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法6：
代码如下： 复制代码代码如下:<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
var op = document.createElement("option");
op.appendChild(document.createTextNode("F"));
s.appendChild(op);
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html> 测试结果：Firefox、Chrome、IE9、IE8、IE7、Safari、Opera显示正常。
方法7：
代码如下： 复制代码代码如下:<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.innerHTML = "<option>X</option><option>Y</option>";
}
</script>
</head>
<body οnlοad="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html>

select 在各浏览器中显示option的测试结果分享相关推荐

new Date(2019-05-10 08:00:00) 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题...
js new Date("2019-05-10 08:00:00") 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题. 在高级浏览器上new Date ...
java 下载文件大小_如何在浏览器中显示使用角度5下载的文件的文件大小？
我使用答案中的代码在角度5中实现了文件下载: 我有一个spring boot后端,它发送一个http响应对象,它有文件字节数组作为主体和内容类型,内容配置和内容长度 . 我不得不允许暴露的 Heade ...
html在浏览器显示图片,html - 在所有Web浏览器中显示TIFF图像
html - 在所有Web浏览器中显示TIFF图像如何在HTML页面中处理TIFF文件? 我想在HTML页面中显示TIFF文件. 我尝试使用嵌入式标签,对象ID,img等.但我无法在HTML页面中显 ...
如何能在浏览器中显示三维模型
原文地址:如何能在浏览器中显示三维模型作者: 布鲁斯-宋随着BIM的火热发展,以及BIM桌面软件对电脑硬件越来越高的要求,越来越多的企业希望能通过浏览器展示BIM模型,管理BIM模型相关的信息.这 ...
Java Web项目中HTML文件中的汉字在浏览器中显示乱码的解决方案
今天在做一个Java Web项目的时候,html中的汉字在浏览器中显示为乱码,分析其可能原因有: (1)html文件属性中有默认的编码方式,如果它的设置与html文档中content charset属 ...
select在各个浏览器中的兼容性问题
们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要CSS属性的支持,打造全兼容select. 对select的h ...
如何在浏览器中显示本地文件系统_如何完全卸载浏览器中的Flash插件
Flash插件作为浏览器中常用的插件,经常会出现各种问题,需要重新安装,这里就讲一下如何真正卸载浏览器中的Flash插件. 如何下载网页中的swf文件-百度经验jingyan.baidu.com 适 ...
adobe reader java_请问，如何用JAVA读PDF文件在浏览器中显示，不需要在本地系统中安装Adobe Reader。求java代码...
JAVA读PDF可以实现,重点是如何在网页中显示PDF文件,而且不需要安装AdobeReader.没有安装AdobeReader,在网页显示PDF文件时,浏览器会提示下载.请问如何在网页中显示PDF文 ...
JSP页面在浏览器中显示HTML代码被截断显示不全
本文参考: 参考博文代码明明没错的情况下,把我一天的时间给浪费了..实属把我整自闭了..后面觉得查看了源代码才发现是这样.. 问题描述: 在JSP页面内容过长时,在JSP代码没有错误的情况下,查看页 ...

select 在各浏览器中显示option的测试结果分享

select 在各浏览器中显示option的测试结果分享相关推荐

最新文章

热门文章