Jquery help for single select country state fetch data

Ravi
December 3, 2022
231 views
0 votes
2 Answers

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>

Answers

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
}
?>

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
}
?>

Please signup or login to give your own answer.

Click here to cancel reply.