显示级联下拉列表

Question

index.php

<div id="container">
  <div id="body">
    <div id="dropdowns">
       <div id="center" class="cascade">
          <?php
        $sql = "SELECT searchname FROM search_parent";
        $query = mysqli_query($con, $sql);
        ?>
            <label>First Option:
            <select name="searchname" id = "drop1">
              <option value="">Please Select</option>
              <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
              <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["searchname"]; ?></option>
              <?php } ?>
            </select>
            </label>
          </div>

        <div class="cascade" id="state"></div> 

          <div id="city" class="cascade"></div> 
        </div>
    </div>
  </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){

    var country_id =  $("select#drop1 option:selected").attr('value'); 
// alert(country_id);   
    $("#state").html( "" );
    $("#city").html( "" );
    if (country_id.length > 0 ) { 

     $.ajax({
            type: "POST",
            url: "fetch_state.php",
            data: "country_id="+country_id,
            cache: false,
            beforeSend: function () { 
                $('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
            },
            success: function(html) {    
                $("#state").html( html );
            }
        });
    } 
});
});
</script>

fetch_state.php

<?php

include("connection.php");
$country_id = trim(mysqli_escape_string($con,$_POST["country_id"]));

$sql = "SELECT * FROM t1 WHERE parent_id = '".$country_id ."' ";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>Select: 
<select name="state" id="drop2">
    <option value="">Please Select</option>
    <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
    <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["title"]; ?></option>
    <?php } ?>
</select>
</label>
<?php 
    }

?>

<script src="jquery-1.9.0.min.js"></script>

Table for search_parent

id  searchname
1     t1
2     t2
3     t3

When a user selects t1 the values on second dropdown list should get populated from t1 table and if t2 is selected it should get populated from t2 table and if t3 is selected 2nd dropdown should get populated from t3 table

table for t1

id   title   parent_id
1    tt1      1

however when i run this code, it is not working it just shows the first dropdown, and when i select a value nothing gets displayed further

Answer 1

I think your problem is, you have missing the id field.

So, in your first query, you says:

SELECT searchname FROM search_parent

As you described, it could be, t1, t2, t3. But you did not select the id field in your query, but you've tried to add it as an option value:

<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["searchname"]; ?></option>
                       here^^^^^^^^^

So nothing will be in the value.

You need to change your query to

SELECT id,searchname FROM search_parent