cakePHP 和双下拉

Question

我想创建一种双下拉菜单。例如，最初选择框是空的，带有一个向下箭头。如果您单击箭头，您会看到一个包含两个条目的下拉列表：MA 和 NH。如果您然后单击 MA，您将获得另一个带有波士顿和伍斯特的下拉列表。如果您点击 NH，您会看到 Concord 和 Nashua 的下拉菜单。

Answer 1

据我所知，这与 CakePHP 无关。 CakePHP 是一个服务器端 PHP 框架，而不是客户端库。这可以通过 JavaScript 来完成，我推荐在这里使用 jQuery 库。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="dropdown">
    Hover me
    <div class="state">
        MA
        <div class="city">Boston</div>
        <div class="city">Worcester</div>
    </div>
    <div class="state">
        NH
        <div class="city">Concord</div>
        <div class="city">Nashua</div>
    </div>
</div>

<style>
    #dropdown{background-color: yellow;width:200px}
    .state{background-color: orange;}
    .city{background-color: lime;}
    .city,.state{display:none}
</style>

<script>
    $(document).ready(function(){
        $("#dropdown").mouseenter(function(){
            $(this).find(".state").show()
            $(this).find(".city").hide()
        }).mouseleave(function(){
            $(this).find(".state").hide()
        })
        $(".state").mouseenter(function(){
            $(".city").hide()
            $(this).find(".city").show()
        }).mouseleave(function(){
            $(".city").hide()
        })
    })
</script>

此代码仅用于说明。它没有优化，但 100% 工作。

永远不要使用内联样式和脚本。