CODEWITHSUNDEEP
cakephpdrop-down-menu
Debby Granberg
Debby Granberg

Reputation: 3

cakePHP and double drop down

I would like to create a sort of double dropdown. For example, initially the selection box is empty with a down arrow. If you click the arrow you get a dropdown with two entries: MA and NH. If you then click MA you get another dropdown with Boston and Worcester. If you click NH you get a dropdown Concord and Nashua.

Upvotes: 0

Views: 373

Answers (1)

igorpavlov
igorpavlov

Reputation: 3626

As far as I know, this isn't connected with CakePHP. CakePHP is a server-side PHP framework, not client-side library. This can be done with JavaScript, I recommend using jQuery Library here.

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

This code is just for explanation. It is not optimized, but 100% working.

Never use inline styles and scripts.

Upvotes: 1

Related Questions