zulhfreelancer
12/19/2014 - 5:50 PM

Simple Dynamic Dropdown (Malaysia States) Using jQuery // Demo: http://jsfiddle.net/qwv7vLvy/

Simple Dynamic Dropdown (Malaysia States) Using jQuery // Demo: http://jsfiddle.net/qwv7vLvy/

dynamic-dropdown.html
content_copyfile_download
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Dynamic Dropdown</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <p>Please select your region and state:</p>
    <select id="region">
        <option id="please_select">-- Select Region --</option>
        <option id="wm">West Malaysia</option>
        <option id="em">East Malaysia</option>
    </select>
    <select id="state"></select>
    <br/>
    <br/>
    <button id="showResult">Show Result</button>
    <br/>
    <br/>
    <div id="result"></div>

    <script type="text/javascript">
    // Launch this when file was fully loaded
    $(document).ready(function() {

        // Hide states dropdown
        $("#state,#showResult").hide();

        // Put all West Malaysia states in a variable
        var wmStates = "<option>Perlis</option><option>Kedah</option><option>Perak</option><option>Pulau Pinang</option><option>Selangor</option><option>Melaka</option><option>Negeri Sembilan</option><option>Johor</option><option>Pahang</option><option>Terengganu</option><option>Kelantan</option>";

        // Put all East Malaysia states in a variable
        var emStates = "<option>Sarawak</option><option>WP Labuan</option><option>Sabah</option>";

        // Listen to #region dropdown change
        $("#region").change(function() {

            // Get the selected value
            var selected = $(this).val();

            // Show states dropdown
            $("#state,#showResult").show();

            // If West Malaysia selected, show West Malaysia states
            if (selected == 'West Malaysia') {
                // Show dropdown set for West Malaysia
                $("#state").html(wmStates);
            }
            // If East Malaysia selected, show East Malaysia states
            else if (selected == 'East Malaysia') {
                // Show dropdown set for East Malaysia
                $("#state").html(emStates);
            }
            // If -- Region -- is selected
            else if (selected == '-- Select Region --') {
                // Hide #states, button & #result
                $("#state,#showResult,#result").hide();

                // Ask user to select a region
                alert('Please select your region');
            }
        });

        // Listen to button click
        $("#showResult").click(function() {

            // Get selected value and put in variables
            var regionSelected = $("#region").val();
            var stateSelected = $("#state").val();

            // Put the variables inside the #result div
            $("#result").html("Region: " + regionSelected + "<br/>State: " + stateSelected);
        });

    });
    </script>
</body>

</html>