2

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

我想要的是让第一个框中的选择确定框 2 显示哪个图层，然后让框 2 中的选择显示框 3 的适当层。然后我希望框 3 中的选择显示第四个层 - “结果”。

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

在头部标签中：

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>
4

0 回答 0