|
 |
| |
ดึงข้อมูล jquery dependent dropdownlist มาแก้ไข (รายละเอียดด้านในครับ) |
| |
 |
|
|
 |
 |
|
db.sql
Create table data
(
id int primary key auto_increment,
data varchar(50),
weight int(2),
);
INSERT INTO `data` VALUES(1, 'India','1');
INSERT INTO `data` VALUES(2, 'United States','1');
INSERT INTO `data` VALUES(3, 'United Kingdom','1');
INSERT INTO `data` VALUES(4, 'Chennai','0');
INSERT INTO `data` VALUES(5, 'Delhi','0');
INSERT INTO `data` VALUES(6, 'Mumbai','0');
INSERT INTO `data` VALUES(7, 'kolkata','0');
INSERT INTO `data` VALUES(8, 'New York','0');
INSERT INTO `data` VALUES(9, 'Los Angeles','0');
INSERT INTO `data` VALUES(10, 'Chicago','0');
INSERT INTO `data` VALUES(11, 'San Francisco','0');
INSERT INTO `data` VALUES(12, 'Las Vegas','0');
INSERT INTO `data` VALUES(13, 'London','0');
INSERT INTO `data` VALUES(14, 'Liverpool','0');
INSERT INTO `data` VALUES(15, 'Sunderland','0');
CREATE TABLE `data_parent`
(
`pid` int(11) primary key auto_increment,
`did` int(11) unique,
`parent` int(11),
Foreign key(did) references data(id)
)
INSERT INTO `data_parent` VALUES(1, 1, 0);
INSERT INTO `data_parent` VALUES(2, 2, 0);
INSERT INTO `data_parent` VALUES(3, 3, 0);
INSERT INTO `data_parent` VALUES(4, 4, 1);
INSERT INTO `data_parent` VALUES(5, 5, 1);
INSERT INTO `data_parent` VALUES(6, 6, 1);
INSERT INTO `data_parent` VALUES(7, 7, 1);
INSERT INTO `data_parent` VALUES(8, 8, 2);
INSERT INTO `data_parent` VALUES(9, 9, 2);
INSERT INTO `data_parent` VALUES(10, 10, 2);
INSERT INTO `data_parent` VALUES(11, 11, 2);
INSERT INTO `data_parent` VALUES(12, 12, 2);
INSERT INTO `data_parent` VALUES(13, 13, 3);
INSERT INTO `data_parent` VALUES(14, 14, 3);
INSERT INTO `data_parent` VALUES(15, 15, 3);
db.php
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "root";
$mysql_database = "db";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>
sections_demo.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sections Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".country").change(function(){
var id=$(this).val();
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html){
$(".city").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
</style>
</head>
<body>
<div style="margin:80px">
<label>Country :</label> <select name="country" class="country">
<option selected="selected">--Select Country--</option>
<?php
include('db.php');
$sql=mysql_query("SELECT * FROM country ORDER BY name_en ASC");
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$data=$row['name_en'];
echo "<option value=".$id.">".$data."</option>\n";
}
?>
</select> <br/><br/>
<label>City :</label> <select name="city" class="city">
<option selected="selected">--Select City--</option>
</select>
</div>
</body>
</html>
ajax_city.php
<?php
include('db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysql_query("SELECT * FROM area WHERE country_id='$id'");
while($row=mysql_fetch_array($sql)){
$id=$row['id'];
$data=$row['area_en'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
อยากได้ความช่วยในกรณีที่จะนำข้อมูลเดิมมาแก้ไขครับ
- ตอนนี้ตอนเพิ่มข้อมูล code ชุดนี้ทำงานได้เป็นปกติครับ
- ตอนแก้ไขอยากให้ดึงค่าเดิมมาแสดงก่อน ถ้ามีการเปลียนแปลง country ก็ให้ city เปลี่ยนด้วย ตอนนี้ผมติดหน้านี้อยู่อ่ะครับ
ปล. ผมได้ลองค้นกระทู้เก่าๆ ดูแล้วนะครับ แต่ก้ยังไม่มีพูดถึง หรือผมตกหล่นกระทู้ไหนไปก็แนะนำมาเลยครับ เด่วผมเข้าไปดูอีกรอบครับ
ขอบคุณครับ
Tag : PHP, MySQL, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2012-10-15 17:24:07 |
By :
pokultra |
View :
3039 |
Reply :
8 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
น่าจะใช้หลักการเดียวกันครับ แทนที่จะใช้ $(".country").change(function(){ ก็ใช้เป็น พวก body load อะไรประมาณนี้ครับ ให้มันทำงานหลังจากที่โหลดเสร็จครับ
|
| |
|
|
| |
| Date :
2012-10-16 11:25:31 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
น่าจะเพิ่มประมาณนี้ครับ
Code (jQuery)
<script type="text/javascript">
$(document).ready(function(){
var id="xxxx";
var dataString = 'id='+ id;
$.ajax({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(html){
$(".city").html(html);
}
});
});
</script>
|
| |
|
|
| |
| Date :
2012-10-16 11:26:23 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากครับพี่วิน ได้ผลอย่างไรจะแจ้งให้ทราบนะครับ 
|
| |
|
|
| |
| Date :
2012-10-16 13:17:24 |
By :
pokultra |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2012-10-16 13:31:36 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณนะครับพี่วิน ผ่านฉลุย ^_^
|
| |
|
|
| |
| Date :
2012-10-17 09:47:03 |
By :
pokultra |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
5555+ ผมตอบมั่ว
|
| |
|
|
| |
| Date :
2012-10-17 09:52:52 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เอ๊า!!! แต่ผมก็เชื่อนะครับ ^_^
|
| |
|
|
| |
| Date :
2012-10-17 10:02:14 |
By :
pokultra |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
