skip to Main Content

here is a code for multiselect which is working fine for multiselect but i need this code to be work in single select , in this Code #Country list is simply getting list from option as you can see in code and when we select #country in dropdown the #state data is fetching from data base according to country selection

( Multi select is Working fine but i need this in Single select )

<script src="js/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<label for="country">Country</label>  ( Simple Drop Down for Country )
<?php include "fetch_country.php"; ?>
<select id="country" name="country[]" multiple class="form-control" >
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
<option value="China" label="China">China</option>
</select>

    
<div class="col-sm-6">
<label for="state">State</label> ( Fetching State data from Database )
<select id="state" name="state[]" multiple class="form-control" >
<option disabled>Select Country First</option>    
</select>

<button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
</form>

<script>
$(document).ready(function(){

$('#country').multiselect({
nonSelectedText:'?',
buttonWidth:'250px',
maxHeight: 400,
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
$('#state').multiselect('rebuild');
}
})
}
}
});
$('#state').multiselect({
nonSelectedText: '?',
allSelectedText: 'All',
buttonWidth:'250px', 
includeSelectAllOption: true,
maxHeight: 400,
enableFiltering:true
});
});
</script>

2

Answers


  1. Html Part

    <div class="container mt-5">
        <div class="row">
            <div class="card">
                <div class="card-header">
                    <h2 class="text-success">Country State City Dropdown List in PHP MySQL Ajax - Tutsmake.COM</h2>
                </div>
                <div class="card-body">
                    <form>
                        <div class="form-group">
                            <label for="country">Country</label>
                            <select class="form-control" id="country-dropdown">
                                <option value="">Select Country</option>
                                <?php
                                require_once "db.php";
                                $result = mysqli_query($conn, "SELECT * FROM countries");
                                while ($row = mysqli_fetch_array($result)) {
                                ?>
                                    <option value="<?php echo $row['id']; ?>"><?php echo $row["name"]; ?></option>
                                <?php
                                }
                                ?>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="state">State</label>
                            <select class="form-control" id="state-dropdown">
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="city">City</label>
                            <select class="form-control" id="city-dropdown">
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    

    js part

    $(document).ready(function () {
        $('#country-dropdown').on('change', function () {
            var country_id = this.value;
            $.ajax({
                url: "states-by-country.php",
                type: "POST",
                data: {
                    country_id: country_id
                },
                cache: false,
                success: function (result) {
                    $("#state-dropdown").html(result);
                    $('#city-dropdown').html('<option value="">Select State First</option>');
                }
            });
        });
        $('#state-dropdown').on('change', function () {
            var state_id = this.value;
            $.ajax({
                url: "cities-by-state.php",
                type: "POST",
                data: {
                    state_id: state_id
                },
                cache: false,
                success: function (result) {
                    $("#city-dropdown").html(result);
                }
            });
        });
    });
    

    states-by-country.php

    <?php
    require_once "db.php";
    $country_id = $_POST["country_id"];
    $result = mysqli_query($conn, "SELECT * FROM states where country_id = $country_id");
    ?>
    <option value="">Select State</option>
    <?php
    while ($row = mysqli_fetch_array($result)) {
    ?>
        <option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
    <?php
    }
    ?>
    

    cities-by-state.php

    <?php
    require_once "db.php";
    $state_id = $_POST["state_id"];
    $result = mysqli_query($conn, "SELECT * FROM cities where state_id = $state_id");
    ?>
    <option value="">Select City</option>
    <?php
    while ($row = mysqli_fetch_array($result)) {
    ?>
        <option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
    <?php
    }
    ?>
    
    Login or Signup to reply.
  2. Then try this

    <label for="country">Country</label> 
    <select id="country" name="country" multiple class="form-control">
        <option value="India" label="India">India</option>
        <option value="USA" label="USA">USA</option>
        <option value="UK" label="UK">UK</option>
        <option value="Canada" label="Canada">Canada</option>
        <option value="China" label="China">China</option>
    </select>
    
    
    <label for="state">State</label> ( Fetching State data from Database )
    <select id="state" name="state[]" multiple class="form-control">
        <option disabled>Select Country First</option>
    </select>
    
    <button class="myButnsbmt" type="submit" name="update" value="Update">Submit</button>
    
    <script>
        $(document).ready(function() {
            $('#country').on('change', function() {
                var countryname = this.value;
                $.ajax({
                    url: "states-by-country.php",
                    type: "POST",
                    data: {
                        country: countryname
                    },
                    cache: false,
                    success: function(result) {
                        $("#state-dropdown").html(result);
                        $('#city-dropdown').html('<option value="">Select State First</option>');
                    }
                });
            });
        });
    </script>
    

    states-by-country.php

    <?php
    require_once "db.php";
    $country = $_POST["country"];
    $result = mysqli_query($conn, "SELECT * FROM states where countryname = $country");
    ?>
    <option value="">Select State</option>
    <?php
    while ($row = mysqli_fetch_array($result)) {
    ?>
        <option value="<?php echo $row["id"]; ?>"><?php echo $row["name"]; ?></option>
    <?php
    }
    ?>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search