0

オプションが 4 つのプルダウン メニューのそれぞれから選択されると、カスケード リストを表示/非表示にするスクリプトを作成しています。たとえば、人が州を選択すると、都市のデフォルトの空のリストが非表示になり、代わりにその州に適した都市のリストが表示されます。

これが私の 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>

選択肢を 1 つに絞り込みましたが、リストには約 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