有3个下拉列表框。 1.国家2.国家3.城市
它在下拉列表样式中工作正常，但我想要，
当我从中选择一个选项时 国家，州应以复选框的形式显示。 我尽我所能，但我不知道为什么它以复选框的形式显示。
＆＃34;对不起我的英语＆＃34;
ajaxData.php
<?php
//Include database configuration file
include('dbConfig.php');
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
//Get all state data
$query = $db->query("SELECT * FROM states WHERE country_id =
".$_POST['country_id']."");
//Count total number of rows
$rowCount = $query->num_rows;
//Display states list
if($rowCount > 0){
echo '<input type ="checkbox" value="">'Select state ;
while($row = $query->fetch_assoc()){
echo '<input type="checkbox"
value="'.$row['state_id'].'">'.$row['state_name'].'';
}
}else{
echo '<input type="checkbox" value="">'State not available;
}
}
if(isset($_POST["state_id"]) && !empty($_POST["state_id"])){
//Get all city data
$query = $db->query("SELECT * FROM cities WHERE state_id =
".$_POST['state_id']."");
//Count total number of rows
$rowCount = $query->num_rows;
//Display cities list
if($rowCount > 0){
echo '<option value="">Select city</option>';
while($row = $query->fetch_assoc()){
echo '<option
value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}else{
echo '<option value="">City not available</option>';
}
}
?>
第二个文件是
的index.php
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open
Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="jquery.min.js"></script>
<style>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}
.select-boxes{width: 280px;text-align: center;}
select {
background-color: #F5F5F5;
border: 1px double #15a6c7;
color: #1d93d1;
font-family: Georgia;
font-weight: bold;
font-size: 14px;
height: 39px;
padding: 7px 8px;
width: 250px;
outline: none;
margin: 10px 0 10px 0;
}
select option{
font-family: Georgia;
font-size: 14px;
}
</style>
//---------------------------AJAX Technique ---------------------------------
-----//
<script type="text/javascript">
$(document).ready(function(){
// ---------------------------------------------- 1 ------------------------
----------------------
$('#country').on('change',function(){
var countryID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'country_id='+countryID,
success:function(html){
$('#state').html(html);
$('#city').html('<option value="">Select state
first</option>');
}
});
}else{
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
});
$('#state').on('change',function(){
var stateID = $(this).val();
if(stateID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'state_id='+stateID,
success:function(html){
$('#city').html(html);
}
});
}else{
$('#city').html('<option value="">Select state first</option>');
}
});
});
</script>
//------------------------------------AJAX Technique END-----------------
-----------------------------//
<body class="w3-light-grey">
<!-- Navigation bar with social media icons -->
<div class="w3-bar w3-black w3-hide-small">
<a href="https://www.facebook.com/lisenme/" class="w3-bar-item w3-button">
<i class="fa fa-facebook-official"></i></a>
<a href="https://twitter.com/LisenMee" class="w3-bar-item w3-button"><i
class="fa fa-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCEdC6Qk_DZ9fX_gUYFJ1tsA"
class="w3-bar-item w3-button"><i class="fa fa-youtube"></i></a>
<a href="https://plus.google.com/115714479889692934329" class="w3-bar-
item w3-button"><i class="fa fa-google"></i></a>
<div class="w3-content" style="max-width:1600px">
<h6>Welcome to our <span class="w3-tag">Tutorial</span></h6>
</header>
<!-- Image header -->
<!-- Grid -->
<div class="w3-row w3-padding w3-border">
<!-- Blog entries -->
<div class="w3-col l12 s12">
<!-- Blog entry -->
<div class="w3-container w3-white w3-margin w3-padding-large">
<h2 style="text-align: center";>Dynamic Dependent Select Box using
jQuery, Ajax and PHP</h2>
<br>
<div class="select-boxes">
<?php
//Include database configuration file
include('dbConfig.php');
//Get all country data
$query = "SELECT * FROM countries";
$rowCount= mysqli_query($db,$query);
//Count total number of rows
// $rowCount =mysqli_num_rows($result);
// $rowCount = $query->num_rows;
?>
<!------------------------ 1 ----------------------------- -->
<select name="country" id="country" >
<option value="">Select Country</option>
<?php
if (mysqli_num_rows($rowCount) > 0) {
while ($row = mysqli_fetch_assoc($rowCount)) {
echo '<option
value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
}
}else{
echo '<option value="">Country not available</option>';
}
?>
</select> </ br>
<!-------- 2 ----------------------- -->
<input type="checkbox" name="state" id="state" value="">
<!-- <option value="">Select country first</option> -->
</select>
<!---------------------------------- 3 --------------------------- -->
<select name="city" id="city">
<option value="">Select state first</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
</html>