select 在各浏览器中显示option的测试结果分享
生活随笔
收集整理的這篇文章主要介紹了
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的测试结果分享的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ArduinoIDE安装与配置与第一个程
- 下一篇： CMD命令行接收用户输入信息