Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Fill Dropdown using jquery without using Ajax

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 167
    Comment on it

    Step 1=> Get all the countries data in an array and all states data corresponding to country wise.

    <?php
    $countries_Array = array(
        'IN'    =>  'INDIA',
        'BG'    =>  'Belgium',  
        'AU'    =>  'Australia',        
        );
    $states_array = array(
        'IN'    =>  array('UP' => 'Uttar Pradesh',
                            'DL'    =>  'Delhi',                        
                            'GU'    =>  'Gujrat'),
        'BG'    =>  array('FL'  =>  'Flanders',
                        'WL'    =>  'Wallonia',                                     
                        'BC'    =>  'Brussels-Capital'),    
        'AU'    =>  array('ACT' =>  'Australian Capital Territory',                                 
                        'TAS'   =>  'Tasmania',                 
                        'WA'    =>  'Western Australia')    
    );
    ?> 
    

    Step 2=> Create the Json of states array.

    <script>
    var _stateJosnData = {};
    <?php if(!empty($states_array)):?>
            var _stateJosnData = <?php echo json_encode($states_array); ?>;
    <?php endif; ?>
    </script>
    

    Step 3=> Create countries and states Drop-down.

    <select class="form-control country-select" target="#states_ddl">
    <option value="">-- Select Country --</option>
     <?php foreach($countries_Array as $k => $v): ?>
            <option value="<?php echo $k; ?>"><?php echo $v; ?></option>
    <?php endforeach; ?>
    </select>
    
    <select class="form-control"  id="states_ddl">
    <option value="">-- Select State --</option>
    </select>
    

    Step 4 => Jquery code for displaying states country-wise.

    <script>
    jQuery(document).ready(function() {
    
    $(document).delegate('.country-select', 'change', function(e){
    var source = $(this),
                val = $.trim(source.val()),
                target = source.attr('target');
                $(target).empty();
            if(typeof(_stateJosnData[val]) != "undefined"){
                var stateoptions = (typeof(_stateJosnData[val]) != "undefined") ? _stateJosnData[val] : {};
                 $('<option>-- Select State --</option>').appendTo(target);
                $.each( stateoptions , function(value, index) {
                        $('<option value="' + value + '">' + index + '</option>').appendTo(target);
                });
            }
    
        });
        });
    </script>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: