Dynamic dropdown with auto select one option and it’s sub-dropdown options

I have a dropdown in which one is for states and second one is it’s sub category, which shows name of cities on basis of first dropdown. Right now user need to select one category then subcategories load, What change I want is “To set one value as default and load it’s subcategories too” at load of page, and further user select different category so it should load it’s subcategories accordingly.

Index.php:

<form name="insert" action="" method="post">
    <table width="100%" height="117" border="0">
        <tr>
            <th width="27%" height="63" scope="row">Sate :</th>
                <td width="73%">
                    <select onChange="getdistrict(this.value);" name="state" id="state" class="form-control">
                    <option value="">Select</option>
                    <?php $query =
                        mysqli_query($con,"SELECT * FROM state");
                        while($row=mysqli_fetch_array($query))
                        { ?>
                            <option value="<?php echo $row['StCode'];?>">
                                <?php echo $row['StateName'];?>
                            </option>
                    <?php }?>
                    </select>
                </td>
            </tr><tr>
            <th scope="row">District :</th>
            <td>
                <select name="district" id="district-list" class="form-control">
                <option value="">Select</option>
                </select>
            </td>
        </tr>
    </table>
</form>
<script>
    function getdistrict(val) {
        $.ajax({
            type: "POST",
            url: "get_district.php",
            data: "state_id=" + val,
            success: function (data) {
                $("#district-list").html(data);
            },
        });
    }
</script>

get_district.php:

<?php
    require_once("config.php");
    if(!empty($_POST["state_id"])){
        $query =mysqli_query($con,"SELECT * FROM district WHERE StCode = '" . $_POST["state_id"] . "'");
?>
    <option value="">Select District</option>
    <?php
        while($row=mysqli_fetch_array($query)){
    ?>
        <option value="<?php echo $row["DistrictName"]; ?>"><?php echo $row["DistrictName"]; ?></option>
    <?php
        }
    }
?>

Answer

You would need to do 2 things

1.) insert a selected flag into the input

2.) activate the second dropdown on page load

1.) If the selected entry does never change then hardcode the default selected field in your code like if $var = XXX then echo “selected”. If you have any function which calculates the default value e.g. a geolocation service like e.g. maxmind.com which takes the users remote IP address and outputs his current state, then use this result to set the selected entry.

<?php
while($row=mysqli_fetch_array($query)){          
$row["StCode"] == "DESIRED_VALUE" ? $selected ="selected" : $selected ="";
?>
 
<option value="<?php echo $row['StCode'];?>" <?= $selected ?> ><?php echo $row['StateName'];?>
</option>
  [...]

Or add a field in the table SELECTED where you mark the default record with 1.

<?php
while($row=mysqli_fetch_array($query)){         
$row["selected"] == 1 ? $selected ="selected" : $selected ="";
?>
<option value="<?php echo $row['StCode'];?>" <?= $selected ?>  >
<?php echo $row['StateName'];?>
</option>
[...]

2.) You have to set the second select dropdown on page load. There are several ways to do this – this is explained here in detail: Jquery execute onchange event on onload

Advertisement

Answer