Question

我想创建一个带有下拉列表的选择菜单。但是因为有很多选择我希望将它们分类。让我们说我需要人们选择城市。我希望国家和城市可以选择，但如果我选择一个国家，那么选项会在所选国家/地区的城市中扩展。通常在html中我可以很容易地做，但在形式上它有点棘手..

这是我的 HTML代码：

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="${facebookAppId}"/>

Answer 1

这不是最好的实现，但可以作为开始的参考。

JSFiddle

代码

＆＃13;

function createCountries() {
    var html = "";
    for (var i = 0; i < 5; i++) {
        html += "<div class='country'>Country " + i + "</div>";
        html += "<div class='cities'></div>";
    }
    $("#content").html(html)
}

function createCities() {
    $(".country").each(function (row) {
        var random = Math.floor(Math.random() * 10)
        var html = "";
        console.log(random);
        if (random == 0) random = 5;

        for (var i = 0; i < random; i++) {
            html += "<div href='#' class='city'>City " + i + "</div>";
        }
        $(this).next().html(html);
    })
}

function createAccordions() {
    $("#content").accordion({
        collapsible: true,
        autoHeight: false,
        active: 100                 // Hack to keep it closd default
    });
    $("#main").accordion({
        collapsible: true,
        autoHeight: true,
        active: 100                 // Hack to keep it closd default
        
    });
}

function createHTML() {
    console.log($("#content").html())
    createCountries();
    createCities();
    createAccordions();
}

createHTML()

＆＃13;

.country {
    color:#333;
    font-size:16px;
}
.city {
    color:Blue;
    font-size:14px;
    padding:5px;
    border-bottom:1px solid gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="main">
    <div>Main</div>
    <div id="content"></div>
</div>

＆＃13;

如何在同一选项/下拉菜单中的选择中展开选项

1 个答案:

代码