|
 |
| |
คือผมจะทำ dropdown แต่เลือกข้อมูลอันแรกไม่ได้ แต่เลือกข้อมูลอันต่อไปได้ แต่ประเด็นอยู่ที่ว่าถ้าข้อมูลในช่องนั้น มันมีช่องเดียว ผมก็จะไม่สามารถเลือกข้อมูลของช่องต่อไปได้อะครับ |
| |
 |
|
|
 |
 |
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Select2</title>
<!-- นำเข้า Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- นำเข้า Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="col-md-4">
<div class="form-group">
<!-- แสดงตัวเลือก จังหวัด -->
<select class="form-control select2-single" id="province">
<option id="province_list"> -- Select --</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<!-- แสดงตัวเลือก อำเภอ -->
<select class="form-control select2-single " id="amphur">
<option id="amphur_list"> -- Select --</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<!-- แสดงตัวเลือก ตำบล -->
<select class="form-control select2-single" id="district">
<option id = "district_list"> -- Select --</option>
</select>
</div>
</div>
</div>
<!-- นำเข้า Javascript jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<script>
$(function(){
//เรียกใช้งาน Select2
$(".select2-single").select2();
//ดึงข้อมูล province จากไฟล์ get_data.php
$.ajax({
url:"get_data.php",
dataType: "json", //กำหนดให้มีรูปแบบเป็น Json
data:{show_province:'show_province'}, //ส่งค่าตัวแปร show_province เพื่อดึงข้อมูล จังหวัด
success:function(data){
//วนลูปแสดงข้อมูล ที่ได้จาก ตัวแปร data
$.each(data, function( index, value ) {
//แทรก Elements ใน id province ด้วยคำสั่ง append
$("#province").append("<option value='"+ value.id +"'> " + value.name + "</option>");
});
}
});
//แสดงข้อมูล อำเภอ โดยใช้คำสั่ง change จะทำงานกรณีมีการเปลี่ยนแปลงที่ #province
$("#province").change(function(){
//กำหนดให้ ตัวแปร province มีค่าเท่ากับ ค่าของ #province ที่กำลังถูกเลือกในขณะนั้น
var province_id = $(this).val();
$.ajax({
url:"get_data.php",
dataType: "json",//กำหนดให้มีรูปแบบเป็น Json
data:{province_id:province_id},//ส่งค่าตัวแปร province_id เพื่อดึงข้อมูล อำเภอ ที่มี province_id เท่ากับค่าที่ส่งไป
success:function(data){
//กำหนดให้ข้อมูลใน #amphur เป็นค่าว่าง
$("#amphur").text("");
//วนลูปแสดงข้อมูล ที่ได้จาก ตัวแปร data
$.each(data, function( index, value ) {
//แทรก Elements ข้อมูลที่ได้ ใน id amphur ด้วยคำสั่ง append
$("#amphur").append("<option value='"+ value.id +"'> " + value.name + "</option>");
});
}
});
});
//แสดงข้อมูลตำบล โดยใช้คำสั่ง change จะทำงานกรณีมีการเปลี่ยนแปลงที่ #amphur
$("#amphur").change(function(){
//กำหนดให้ ตัวแปร amphur_id มีค่าเท่ากับ ค่าของ #amphur ที่กำลังถูกเลือกในขณะนั้น
var amphur_id = $(this).val();
$.ajax({
url:"get_data.php",
dataType: "json",//กำหนดให้มีรูปแบบเป็น Json
data:{amphur_id:amphur_id},//ส่งค่าตัวแปร amphur_id เพื่อดึงข้อมูล ตำบล ที่มี amphur_id เท่ากับค่าที่ส่งไป
success:function(data){
//กำหนดให้ข้อมูลใน #district เป็นค่าว่าง
$("#district").text("");
//วนลูปแสดงข้อมูล ที่ได้จาก ตัวแปร data
$.each(data, function( index, value ) {
//แทรก Elements ข้อมูลที่ได้ ใน id district ด้วยคำสั่ง append
$("#district").append("<option value='" + value.id + "'> " + value.name + "</option>");
});
}
});
});
//คำสั่ง change จะทำงานกรณีมีการเปลี่ยนแปลงที่ #district
$("#district").change(function(){
//นำข้อมูลรายการ จังหวัด ที่เลือก มาใส่ไว้ในตัวแปร province
var province = $("#province option:selected").text();
//นำข้อมูลรายการ อำเภอ ที่เลือก มาใส่ไว้ในตัวแปร amphur
var amphur = $("#amphur option:selected").text();
//นำข้อมูลรายการ ตำบล ที่เลือก มาใส่ไว้ในตัวแปร district
var district = $("#district option:selected").text();
//ใช้คำสั่ง alert แสดงข้อมูลที่ได้
//alert("คุณได้เลือก : จังหวัด : " + province + " อำเภอ : "+ amphur + " ตำบล : " + district );
});
});
</script>
</body>
</html>
|
 |
 |
 |
 |
| Date :
2019-09-03 14:34:36 |
By :
nack4901 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
<?php
//connect Database
$servername = "localhost";
$username = "root";
$password = "";
$db = "thailand";
// Create connection
$conn = new mysqli($servername, $username, $password,$db);
// Change character set to utf8
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
//ตรวจสอบว่า มีค่า ตัวแปร $_GET['show_province'] เข้ามาหรือไม่ //แสดงรายชื่อจังหวัด
if(isset($_GET['show_province'])){
//คำสั่ง SQL เลือก id และ ชื่อจังหวัด
$sql = "SELECT PROVINCE_ID,PROVINCE_NAME FROM province";
//ประมวณผลคำสั่ง SQL
$result = $conn->query($sql);
//ตรวจสอบ จำนวนข้อมูลที่ได้ มีค่ามากกว่า 0 หรือไม่
if ($result->num_rows > 0) {
//วนลูปแสดงข้อมูลที่ได้ เก็บไว้ในตัวแปร $row
while($row = $result->fetch_assoc()) {
//เก็บข้อมูลที่ได้ไว้ในตัวแปร Array
$json_result[] = [
'id'=>$row['PROVINCE_ID'],
'name'=>$row['PROVINCE_NAME'],
];
}
//ใช้ Function json_encode แปลงข้อมูลในตัวแปร $json_result ให้เป็นรูปแบบ Json
echo json_encode($json_result);
}
}
//ตรวจสอบว่า มีค่า ตัวแปร $_GET['province_id'] เข้ามาหรือไม่ //แสดงรายชืออำเภอ
if(isset($_GET['province_id'])){
//กำหนดให้ตัวแปร $province_id มีค่าเท่ากับ $_GET['province_id]
$province_id = $_GET['province_id'];
//คำสั่ง SQL เลือก AMPHUR_ID และ AMPHUR_NAME ที่มี PROVINCE_ID เท่ากับ $province_id
$sql = "SELECT AMPHUR_ID,AMPHUR_NAME FROM amphur WHERE PROVINCE_ID = ".$province_id." ";
//ประมวณผลคำสั่ง SQL
$result = $conn->query($sql);
//ตรวจสอบ จำนวนข้อมูลที่ได้ มีค่ามากกว่า 0 หรือไม่
if ($result->num_rows > 0) {
//วนลูปนำข้อมูลที่ได้ เก็บไว้ในตัวแปร $row
while($row = $result->fetch_assoc()) {
//เก็บข้อมูลที่ได้ไว้ในตัวแปร Array
$json_result[] = [
'id'=>$row['AMPHUR_ID'],
'name'=>$row['AMPHUR_NAME'],
];
}
//ใช้ Function json_encode แปลงข้อมูลในตัวแปร $json_result ให้เป็นรูปแบบ Json
echo json_encode($json_result);
}
}
//ตรวจสอบว่า มีค่า ตัวแปร $_GET['province_id'] เข้ามาหรือไม่ //แสดงรายชืออำเภอ
if(isset($_GET['amphur_id'])){
//กำหนดให้ตัวแปร $amphur_id มีค่าเท่ากับ $_GET['amphur_id]
$amphur_id = $_GET['amphur_id'];
//คำสั่ง SQL เลือก DISTRICT_CODE และ DISTRICT_NAME ที่มี AMPHUR_ID เท่ากับ $amphur_id
$sql = "SELECT DISTRICT_CODE,DISTRICT_NAME FROM district WHERE AMPHUR_ID = '".$amphur_id."' ";
//ประมวณผลคำสั่ง SQL
$result = $conn->query($sql);
//ตรวจสอบ จำนวนข้อมูลที่ได้ มีค่ามากกว่า 0 หรือไม่
if ($result->num_rows > 0) {
//วนลูปนำข้อมูลที่ได้ เก็บไว้ในตัวแปร $row
while($row = $result->fetch_assoc()) {
//เก็บข้อมูลที่ได้ไว้ในตัวแปร Array
$json_result[] = [
'id' => $row['DISTRICT_CODE'],
'name'=>$row['DISTRICT_NAME'],
];
}
//ใช้ Function json_encode แปลงข้อมูลในตัวแปร $json_result ให้เป็นรูปแบบ Json
echo json_encode($json_result);
}
}
?>
|
| |
|
|
| |
| Date :
2019-09-03 14:34:59 |
By :
nack4901 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตามคอมเม้น No.1 คือ index.php
ตามคอมเม้น No.2 คือ get_data.php
นะครับ
วานผู้รู้ตอบทีครับ อันนี้ผมก็พยายามมาใช้กับงานผม แต่ว่าตามที่บอกข้างต้นนี่คือตัวอย่างของโค้ดที่ผมเอามา
|
| |
|
|
| |
| Date :
2019-09-03 14:36:27 |
By :
nack4901 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
