select在各访问器中显示信息option的检测結果共享

2020-10-23 15:03 jianzhan
这周企业要出sp3了,忙着检测商品包,我负责检测js的商品包,务必确保每个案例都可以以运作,检测了1天发现了很多难题,在其中1个便是应用select的案例在ie8时显示信息出难题,ie7下立即显示信息不上option,历经查材料将其适配了,这里纪录1下。
方式1
编码以下:

拷贝编码
编码以下:

<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.add(new Option("A"));
}
</script>
</head>
<body onload="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 onload="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 onload="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html>

检测結果:Firefox、Chrome、Safari、Opera显示信息一切正常,IE9、IE8、IE7下不可以显示信息。
方式4
将方式3的insertBefore第2个主要参数去掉,也便是说大家第1个option就想应用insertBefore时,看1下状况:

拷贝编码
编码以下:

<html>
<head>
<title></title>
<script type="text/javascript">
function init()
{
var s = document.getElementById("s");
s.insertBefore(new Option("D"));
}
</script>
</head>
<body onload="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 onload="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 onload="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 onload="init()">
<select id="s" style="width:100px;background:lightskyblue"></select>
</body>
</html>

检测結果:Firefox、Chrome、Safari、Opera显示信息一切正常,IE9、IE8、IE7下不可以显示信息。