Cascading Dropdown Lists Using jQuery

Cascading Dropdown Lists Using jQuery

How to create cascading dropdown lists on selectbox or combobox or listbox using jquery plugin

cascading-dropdown-682016

Import Library

<link rel="stylesheet" href="css/zurb-foundation-5.5.1/foundation.min.css">
<link rel="stylesheet" href="css/font-awesome-4.3.0/css/font-awesome.min.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.cascading-drop-down.js"></script>

Use Script

$('.cascadingDropDown').ssdCascadingDropDown({
        nonFinalCallback: function(trigger, props, data, self) {

            trigger.closest('form')
                    .find('input[type="submit"]')
                    .attr('disabled', true);

        },
        finalCallback: function(trigger, props, data) {

            if (props.isValueEmpty()) {
                trigger.closest('form')
                        .find('input[type="submit"]')
                        .attr('disabled', true);
            } else {
                trigger.closest('form')
                        .find('input[type="submit"]')
                        .attr('disabled', false);
            }

        }
    });

Design Style

body {

            padding: 2rem 0;

}
 .divider {
            height: 1.25rem;
            width: 100%;
            border-top: dashed 1px #aaa;
 }

Make Content

<div class="row">

    <div class="column">





        <form>


            <h2>Product 1</h2>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                        name="category"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-target="make"
                        data-url="data/make.json"
                        data-replacement="container1"

                        >
                        <option value="">Select category</option>
                        <option value="1">Shoes</option>
                        <option value="2">T-shirts</option>
                        <option value="3">Jeans</option>
                        <option value="4">Hats</option>
                        <option value="5">Belts</option>
                        </select>
                </div>

                <div class="medium-6 columns">
                    <select
                        name="make"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="make"
                        data-target="colour"
                        data-url="data/colour.json"
                        data-replacement="container1"
                        data-default-label="Select make"

                        disabled
                        >
                        </select>
                </div>

            </div>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                        name="colour"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="colour"
                        data-target="size"
                        data-url="data/size.json"
                        data-replacement="container1"
                        data-default-label="Select colour"

                        disabled
                        >
                        </select>
                </div>

                <div class="medium-6 columns">
                    <select
                        name="size"
                        class="cascadingDropDown"

                        data-group="product-1"
                        data-id="size"
                        data-default-label="Select size"
                        data-replacement="container1"
                        data-url="data/final.json"
                        data-final
                        disabled
                        >
                        </select>
                </div>

            </div>

            <div class="row">

                <div class="large-4 medium-6 columns large-offset-4 medium-offset-3">

                    <input
                        type="submit"
                        class="small button"
                        value="ADD TO BASKET"
                        disabled
                    >

                </div>

            </div>

        </form>


        <div
            class="panel cascadingContainer"
            data-replacement-container="container1"
            data-default-content="To see results please make your selection using menus above."
            ></div>

        <div class="divider"></div>


        <form>


            <h2>Product 2</h2>


            <div class="row">

                <div class="medium-6 columns">
                    <select
                            name="category"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-target="make"
                            data-url="data/make.json"
                            data-replacement="container2"

                            >
                        <option value="">Select category</option>
                        <option value="1">Shoes</option>
                        <option value="2">T-shirts</option>
                        <option value="3">Jeans</option>
                        <option value="4">Hats</option>
                        <option value="5">Belts</option>
                    </select>
                </div>

                <div class="medium-6 columns">
                    <select
                            name="make"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="make"
                            data-target="colour"
                            data-url="data/colour.json"
                            data-replacement="container2"
                            data-default-label="Select make"

                            disabled
                            >
                    </select>
                </div>

            </div>

            <div class="row">

                <div class="medium-6 columns">
                    <select
                            name="colour"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="colour"
                            data-target="size"
                            data-url="data/size.json"
                            data-replacement="container2"
                            data-default-label="Select colour"

                            disabled
                            >
                    </select>
                </div>

                <div class="medium-6 columns">
                    <select
                            name="size"
                            class="cascadingDropDown"

                            data-group="product-2"
                            data-id="size"
                            data-url="data/final.json"
                            data-replacement="container2"
                            data-default-label="Select size"

                            disabled
                            >
                    </select>
                </div>

            </div>

        </form>

        <div
            class="panel cascadingContainer"
            data-replacement-container="container2"
            data-default-content="To see results please make your selection using menus above."
            ></div>

    </div>

</div>

 

Tags: , , ,