JavaScript根据JQuery Flexbox的选择显示隐藏层

Question

我所拥有的是一组3个Jquery flexbox组合框（下拉列表）。第一个是可见的，另外两个是隐藏的。

我想要的是从第一个框中选择确定哪个图层被显示为框2，然后从框2中选择显示框3的适当图层。然后我想要从框3中选择到揭示第四层 - '结果'。

我需要帮助找出一个可以与JQuery Flexbox一起使用的JavaScript函数，以显示适当的div。

在head标签中：

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>