Question

我有2下拉，基于第一个会出现第二个，并根据2下拉选择它将把它带到上面提到的页面。

代码：

<html>
<style type="text/css">
    #navMenu {
        margin: 70px;
        padding: 40px;
             }
    #navMenu select {
        color: #000;
        background: #CD5C5C;
        font-size: 15px;
        font-weight: bold;
        padding: 2px 10px;
        width: 200px;
        font-family:"Calibri",cursive;
        text-align:center;
             }
    .hiddenMenu {
        display: none;
                }
    .visibleMenu {
        display: inline;
                }
      </style>

           <script type="text/javascript">
              var lastDiv = "";
              function showDiv(divName) 
              {
                 if (lastDiv)
                 {
                   document.getElementById(lastDiv).className = "hiddenMenu";
                 }   
              if (divName && document.getElementById(divName)) 
                 {
                   document.getElementById(divName).className = "visibleMenu";
                   lastDiv = divName;
                 }
               }
            </script>


      <body bgcolor="#87CEFA">
      <div id="wrapper">
        <div id="navMenu">
            <select name="category" id="statename" onchange="showDiv(this.value);">
                <option value="-1"><b>--Select State--</b></option>
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
                <option>five</option>
                <option>six</option>
                <option>seven</option>
            </select>
            <br class="clearFloat" /></br>

            <form id="aform">
                <p id="one" class="hiddenMenu">
                    <select id="mymenu" size="1">
                        <option value="">--select--</option>
                        <option value="http://google.com">one selected</option>
                        <option value="http://google.com">two selected</option>
                    </select>
            </form>
            </p>
            <script language="javascript">
                var selectmenu=document.getElementById("mymenu")
                selectmenu.onchange=function()
                {
                   var chosenoption=this.options[this.selectedIndex]
                   if (chosenoption.value!="nothing")
                   {
                      window.open(chosenoption.value,"_parent")
                   }
                }
            </script>

     </div></div>
</body>
</html>

面临的问题：

在IE6中，隐藏的下拉列表无法正常工作
如何使代码与所有浏览器兼容
在Chrome中，当我们选择2下拉后按下它后，它移动到链接，在浏览器中按回第二个下拉列表。
在chrome中，当我选择列表时，根据代码，项目不会以粗体显示。

Answer 1

IE6问题遍布stackoverflow！这是一个愚蠢的浏览器，它不值得花时间处理与它兼容的版本。

关于使代码与所有浏览器兼容有时你需要构建一个全新的css文件，只是为了与某些浏览器兼容，你会在你的html header标签中写这样的

<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/masterie.css" />
    <![endif]-->
    <!--[if !lt IE 8]><!-->
    <link rel="stylesheet" href="css/master.css" />
    <!--<![endif]-->

当我按下Chrome时，显示隐藏的下拉列表

1 个答案: