使用javascript从数据库显示

时间:2015-05-21 20:10:30

标签: javascript php jquery mysql

所以我使用此代码示例来获取级联下拉菜单。但我想添加一个居住在城市的人的名字。如何在选择城市时添加? 链接到demo- http://www.infotuts.com/demo/cascaded-drop-down-jquery-php/

整个代码 - 的index.php



<?php
include("connection.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Cascaded dropdown with jQuery Ajax and PHP | Easyscript4u.com</title>
<link rel="stylesheet" href="style.css" type="text/css" />

</head>
<body>
<div id="container">
  <div id="body">
    <div class="mhead"><h2>Cascaded dropdown with jQuery Ajax and PHP | Easyscript4u.com</h2></div>
	<div id="dropdowns">
       <div id="center" class="cascade">
          <?php
		$sql = "SELECT * FROM tbl_country ORDER BY country_name";
		$query = mysqli_query($con, $sql);
		?>
            <label>Country:
            <select name="country" 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["country_name"]; ?></option>
              <?php } ?>
            </select>
            </label>
          </div>

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

          <div id="city" class="cascade"></div> 
        </div>
    </div>
  </div>
<script src="jquery-1.9.0.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>
</body>
</html>
&#13;
&#13;
&#13;

STATE.PHP

&#13;
&#13;
<?php

include("connection.php");
$country_id = trim(mysql_escape_string($_POST["country_id"]));

$sql = "SELECT * FROM tbl_state WHERE country_id = ".$country_id ." ORDER BY state_name";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>State: 
<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["state_name"]; ?></option>
	<?php } ?>
</select>
</label>
<?php 
	}

?>

<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){


$("select#drop2").change(function(){

	var state_id = $("select#drop2 option:selected").attr('value');
   // alert(state_id);
	if (state_id.length > 0 ) { 
	 $.ajax({
			type: "POST",
			url: "fetch_city.php",
			data: "state_id="+state_id,
			cache: false,
			beforeSend: function () { 
				$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
			},
			success: function(html) {    
				$("#city").html( html );
			}
		});
	} else {
		$("#city").html( "" );
	}
});

});
</script>
&#13;
&#13;
&#13;

CITY.php

&#13;
&#13;
<?php

include("connection.php");
$state_id = trim(mysql_escape_string($_POST["state_id"]));
 
$sql = "SELECT * FROM tbl_city WHERE state_id = ".$state_id ." ORDER BY city_name";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>City: 
<select name="city" name="box">
	<option value="">Please Select</option>
	<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
	<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["city_name"]; ?></option>
	<?php } ?>
</select>
</label>
<?php 
	}

?>
&#13;
&#13;
&#13;

我认为应该运行一个javascript来调用数据库中特定城市的人名。但我不知道该如何去做。因为我是一个新手。 谢谢

1 个答案:

答案 0 :(得分:0)

首先,你的文件应该是:fetch_state.php(而不是state.php)和fetch_city.php(而不是city.php)。

基本上,您需要以下内容: 1.创建一个新表&#34; tbl_person&#34;在您的数据库中至少有两个字段:city_id和person_name;

  1. 按名称创建新文件&#34; fetch_person.php&#34;通过复制当前文件&#34; fetch_city.php&#34;并改变: 城市 - &gt;人 国家 - &gt;城市

  2. 替换您当前的&#34; fetch_city.php&#34;通过复制当前文件&#34; fetch_state.php&#34;并改变: drop2 - &gt; drop3 国家 - &gt;市 国家 - &gt;状态