javascript - JQueryFlexboxからの選択に応じて非表示のレイヤーを表示するJavaScript

Question

私が持っているのは、3つのJqueryフレックスボックスコンボボックス（ドロップダウン）のセットです。最初の1つは表示され、他の2つは非表示になります。

私が欲しいのは、最初のボックスからの選択でボックス2に表示されるレイヤーを決定し、次にボックス2からの選択でボックス3に適切なレイヤーを表示することです。次に、ボックス3からの選択で4番目のレイヤーを表示します。レイヤー-「結果」。

適切なdivを明らかにするために、JQueryFlexboxで動作するJavaScript関数を理解するのに助けが必要です。

ヘッドタグ内：

function showlayer(layer){
    var myLayer = document.getElementById(layer).style.display;
    if(myLayer == "none"){
        document.getElementById(layer).style.display = "block";
    } else {
        document.getElementById(layer).style.display = "none";
    }
}

これは、レイヤーリビールスクリプトを開始するための良い方法である場合とそうでない場合があります。

jQuery(function($) {
    //a flexbox with 3 different types of providers
    //each selection would reveal a different city list (box2)
    $('#ffb1').flexbox(providers, {
        watermark: 'Please choose a provider type',
        width: 260,                   
        autoCompleteFirstMatch: false 
        onSelect: function change(){
            $("div[id^='box_']").show()  //this is the problem here, I think - how do I finish this off?
        });

    $('#ffb2').flexbox(cities, {
        watermark: 'Choose your city',
        width: 260,
    });

    $('#ffb3').flexbox(districts, {
        watermark: 'Choose your location',
        width: 260,
    });
});

およびマークアップ：

<div id="box_1">
    <table class=demo>
        <tbody>
            <tr class=example>
                <td><span>Provider type</span></td>
            </tr>
            <tr>
                <td class=col><b>Please choose the type of provider you are seeking:</B>
                <div style="height: 18px"></div>
                <div id=ffb1></div>
                <div style="clear: both" id=ffb7-result></div></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="box_2a" style="display:none;">
    <table class=demo>
        <tbody>
            <tr class=example>
                <td><span>City list 1</span></td>
            </tr>
            <tr>
                <td class=col><b>Please select the city closest to you:</B>
                <div style="height: 18px"></div>
                <div id=ffb2></div>
                <div style="clear: both" id=ffb7-result></div></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="box_2b" style="display:none;">
    <table class=demo>
        <tbody>
            <tr class=example>
                <td><span>City list 2</span></td>
            </tr>
            <tr>
                <td class=col><b>Please select the city closest to you:</B>
                <div style="height: 18px"></div>
                <div id=ffb2></div></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="box_2c" style="display:none;">
    <table class=demo>
        <tbody>
            <tr class=example>
                <td><span>City list 3</span></td>
            </tr>
            <tr>
                <td class=col><b>Please select the city closest to you:</B>
                <div style="height: 18px"></div>
                <div id=ffb2></div></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="box_3" style="display:none;">
    <table class=demo>
        <tbody>
            <tr class=example>
                <td><span>City Districts</span></td>
            </tr>
            <tr>
                <td class=col><b>Please choose a location:</B>
                <div style="height: 18px"></div>
                <div id=ffb2></div></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="box_4" style="display:none;">
    <table class=demo>
        <!-- results table would go here -->
    </table>
</div>