0

我正在编写一个脚本，该脚本将显示/隐藏级联列表，因为从四个下拉菜单中的每一个中选择选项。例如，当一个人选择一个州时，它会隐藏默认的空城市列表，而是显示该州的相应城市列表。

这是我的 HTML 的简化版本：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="mapselector3.js"></script>
        <link rel="stylesheet" type="text/css" href="mapselectorstyles3.css" />
    </head>
    <body onload="reset('selectstate')">
        <div id="wrapper">
        <h1>Device Installation</h1>
        <p>Select a specific printer by location:</p>
        <form name="mapselector">


            <div class="selectholder">
            <label>Select State:</label>

            <!--states list-->
            <select id="stateselector">
                <option class="selectstate" selected="selected" >Select a State</option>
                <option onclick='showCities("mn")'>Minnesota</option>
                <option onclick='showCities("tx")'>Texas</option>
                <option onclick='showCities("ca")'>California</option>
            </select>

            </div>

            <div class="selectholder">
            <label>Select City:</label>

            <!--cities default list-->
            <select id="cityselector">
                <option>City</option>
            </select>


            <!--cities options-->
            <select id="mn" class="hidden">
                <option  class="selectcity" selected="selected">Then a City</option>
                <option onclick='showBuildings("mn-maplewood")'>Maplewood</option>

            </select>


            </div>

            <div class="selectholder">
            <label>Select Building:</label>

            <!--Building default list-->
            <select id="buildingselector">
                <option>Building</option>
            </select>


            <!--MN buildings options-->
            <select id="mn-maplewood" class="hidden">
                <option  class="selectbuilding" selected="selected">Then a Building</option>
                <option onclick='showFloors("mn-maplewood-b224")'>Building 224</option>
                <option onclick='showFloors("mn-maplewood-b220")'>Building 220</option>
                <option onclick='showFloors("mn-maplewood-b223")'>Building 223</option>
            </select>


            </div>

            <div class="selectholder">
            <label>Select Floor:</label>

            <!--Floors default list-->
            <select id="floorselector" name="floorselector">
                <option>Floor</option>
            </select>


            <!--MN-maplewood floors lists-->
            <select id="mn-maplewood-b224" class='hidden'>
                <option  class="selectfloor" selected="selected">Then a Floor</option>
                <option onclick='setButtonPath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor1.htm")'>Floor 1</option>
                <option onclick='setButtonPath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor2.htm")'>Floor 2</option>
                <option onclick='setButtonPath("states/mncities/maplewoodbuildings/224floors/us-mn-maplewood-b224-floor3.htm")'>Floor 3</option>
            </select>



            </div>


            <a id="submit" href="mapselector3.htm"><div id="button">Floor Map</div></a>
        </form>
        <div id="test"></div>
        <div id="currentstate"></div>
        <div id="currentcity"></div>
        <div id="currentbuilding"></div>
        <div id="currentfloor"></div>
        </div>
    </body>
</html>

我已将其缩减为一个选项，但我的列表将包括大约 25 个州，以及每个州不同数量的城市、每个城市的建筑物和每个建筑物的楼层。我已经在 HTML 中生成了所有列表，并使用 CSS 将它们隐藏在屏幕之外，并且我的 JavaScript 旨在在单击选项时交换适当的列表。

这是我的脚本的样子：

var currentState = 'cityselector';
var currentCity = 'buildingselector';
var currentBuilding = 'floorselector';

function reset(selector) {
    var reset = document.getElementsByClassName(selector);
    for(i=0; i<reset.length; i++) {
        reset[i].selected = "selected";
    }
}

function hide(element) {
    document.getElementById(element).className = "hidden";
}

function show(element) {
    document.getElementById(element).className = "shown";
}

function showCities(stateName) {
    document.getElementById('test').innerHTML = 'in showCities()';
    //hide the current selections and reset the lists to show "Then a City"
    hide(currentState);
    hide(currentCity);
    hide(currentBuilding);
    reset('selectcity');

    //set the currentState to the value clicked and reset currentCity and currentBuilding to their original defaults
    currentState = stateName;
    currentCity = 'buildingselector';
    currentBuilding = 'floorselector';

    //rebuild the list
    show(stateName);
    show(currentCity);
    show(currentBuilding);
    document.getElementById('currentstate').innerHTML = 'currentState = ' + currentState;
}

function showBuildings(cityName) {
    document.getElementById('test').innerHTML = 'in showBuildings()';
    //hide the current selections and reset the lists to show "Then a Building"
    hide(currentCity);
    hide(currentBuilding);
    reset('selectbuilding');

    //set the currentCity to the value clicked and reset currentBuilding to its' original default
    currentCity = cityName;
    currentBuilding = 'floorselector';

    //rebuild the list
    show(cityName);
    show(currentBuilding);
    document.getElementById('currentbuilding').innerHTML = 'currentBuilding = ' + cityName;
}

function showFloors(building) {
    document.getElementById('test').innerHTML = 'in showFloors()';
    //hide the current selections and reset the lists to show "Then a Floor"
    hide(currentBuilding);
    reset('selectfloor');

    //set the currentBuilding to the value clicked
    currentBuilding = building;

    //rebuild the list
    show(building);
}

function setButtonPath(path) {
    document.getElementById('test').innerHTML = 'in setButtonPath()';
    submitButton = document.getElementById('submit');
    submitButton.href = path;
}

从我的本地硬盘在 IE 中运行时，该脚本的功能完全符合预期，但是当我将文件保存到我们域内的共享网络文件夹并从那里运行时，脚本不会运行（除了<body onload="reset('selectstate')">. 我试过用 Jquery 重写整个东西，并遇到了同样的问题。它可以在 Firefox 和 Chrome 中工作，我无法找到任何使用 Firebug 的错误，但我需要它在 IE 中可用。有什么想法吗？

4

0 回答 0