Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • auto-fill drop-down options on basis of previous seclection

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 203
    Comment on it

    Following example illustrate filling state (province) drop-down on basis of country.

    Drop-down HTML

    <select id="countryDropBox">
       <option value="">--Select Country--</option>
       <option value="1">India</option>
       <option value="2">Italy</option>
       <option value="3">Newzealand</option>
    </select>
    
    <select id="stateDropBox">
        <option value="">--Select State--</option>
    </select>
    

    Example of ajax call via jquery

    <script>
        $(document).ready(function(){
            $('#countryDropBox').change(function(){
                var countryId = $(this).val();
    
                $.ajax({
                      type: "POST",
                      dataType: "json",
                      url: 'ajax&#95;getState.php',
                      data:'cid='+countryId,
                      success: function(data){
                           $.each(data, function( key, val ) {
                               $('#stateDropBox').append("<option value='" + key + "'>" + val + "</option>");
                         });
                     }
                });
            });
    
        });
    </script>
    

    here, we intent to receive json of related states (provinces) from stateDropBox.php file, which would have something like

    $cid      = $_POST['cid'];
    $core     = Core::getInstance();
    $query    = 'SELECT * FROM terms WHERE country_id = :cid';
    
    $pdoObject = $core->dbh->prepare($query);
    $queryArray = array(':cid'=>$cid);
    $pdoObject->execute($queryArray);
    $pdoObject->setFetchMode(PDO::FETCH_ASSOC);
    
    $result = array();
    while($row = $pdoObject->fetch()) {
        $sid = $row['state_id'];
        $result[$name] = $row['stateName'];
    }
    
    echo json_encode($result);
    

 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: