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

Question

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

这是我的 html 代码：

<select class="" placeholder="Your Choice">
    <option value="Your Destination">Country1</option>
    <option value="Your Destination">city1</option>
    <option value="Your Destination">city2</option>
    <option value="Your Destination">city3</option>
    <option value="Your Destination">Country2</option>
    <option value="Your Destination">city1</option>
    <option value="Your Destination">city2</option>
    <option value="Your Destination">city3</option>
</select>

Answer 1

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

JSFiddle

代码

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()

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

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