|
 |
| |
รบกวนทีครับ ต้องการ select จากdatabase หลายๆอันแล้ว ให้ทำการ ค้นหาเองโดยไม่ต้องกดSubmit อะครับ |
| |
 |
|
|
 |
 |
|
อันนี้คือที่ ผมกำลังลองทำ ถ้ามันทำการ select อันเดียวก็จะออกครับ แต่จะทำแบบหลายๆ อะครับ ต้องทำยังไงดี เขียนjavascript ดักไม่ถูก
Code (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>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select#typeSub").attr("disabled","disabled");
$("select#carType").change(function(){
$("select#typeSub").attr("disabled","disabled");
$("select#typeSub").html("<option>Loading...</option>");
var carType = $("select#carType option:selected").attr('value');
if(carType < 0 ){
$("select#typeSub").attr("disabled","disabled");
$("select#typeSub").html("<option value='-1'>All Model</option>");
} else
$.post("select_typeSub.php", {carType:carType}, function(data){
$("select#typeSub").removeAttr("disabled");
$("select#typeSub").html(data);
}); //post
}); //change
$("select#carType" && "select#typeSub").change(function(){
var carType = $("select#carType option:selected").attr('value');
var typeSub = $("select#typeSub option:selected").attr('value');
if(carType != -1 && typeSub != -1 ){
}
});
}); //ready
</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="fromSubmit" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<select id="carType" style="width: 235px" onChange="this.form.submit()">
<?php echo $opt->ShowMakes(); ?>
</select>
<br />
<select id="typeSub" style="width: 235px">
<option value="-1">All Model</option>
</select>
<br />
</form>
<?php include 'css/connect.php'; ?>
<?php echo '<p><strong>You have selected</strong> <em>'.$_POST['carType'].'</em></p>'; ?>
</body>
</html>
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery, CakePHP
|
|
|
 |
 |
 |
 |
| Date :
2016-01-19 11:42:42 |
By :
best5566 |
View :
1221 |
Reply :
13 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
chain select แบบนั้นหรอ เลือกอันแรก ละ ไปดึงข้อมูล จาก db มาใส่ select 2 ละเลือก select 2 ไปดึงมาใส่ select 3 แบบนี้ปะ
|
| |
|
|
| |
| Date :
2016-01-19 11:56:40 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
jquery select event ajax ธรรมดาเลยอะครับ
แบบแรกก็เขียน ใช่ละ ก็ทำกับอีกปุ่มเองครับ
|
| |
|
|
| |
| Date :
2016-01-19 13:43:38 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ใช้ on change ซิครับ ไม่ใช่ on submit
|
| |
|
|
| |
| Date :
2016-01-19 14:04:30 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
คือแบบที่คุณเขียนมันก็ใช่แล้วนะ
มีหลาย อันก็เพิ่มๆไป หรือเขียนแบบ ฟังชั่นดียวกันนิแหละ ให้มัน +1 หรืออะไรก็ต้องไปประยุกต์เอง
Code (JavaScript)
// ปิด select2 ก่อนให้กดไม่ได้
$('#select2').attr('disabled',true);
//เมื่อมีการ select ของอันที่ 1 ให้ไป คิวรี่หา select2
$('#select1').on('change',function(){
var myData = {
data : $('option:selected',this).val()
}
$.ajax({
url:loadselect2.php,
type:'POST',
dataType:'json',
data:myData,
success:function(data){
//เอา data มา append ใส่ select2
เขียน code เอาเอง
// เปิด select2 ให้เลือกได้
$('#select2').attr('disabled',false);
}
});
});
|
| |
|
|
| |
| Date :
2016-01-19 14:15:45 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
จะรีบ ซับมิตไปไหนอะ จะส่งค่าไปฟอร์มอื่นหรอครับ ก็ทำกับ select สุดท้ายซิครับ ไม่งั้น มัน submit ตั้งแต่แรก เวบก็รีเฟรชดิ
|
| |
|
|
| |
| Date :
2016-01-19 14:29:25 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ก็ นั่นแหละคับ on change ไง มันอยู่ที่คุณจะไป select อะไรส่งมาบ้าง และให้แสดง ตรงไหน
|
| |
|
|
| |
| Date :
2016-01-19 14:45:44 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สมมุติ select box แต่ละอันเลือดได้อิสระต่อกัน
อย่างแรก คือ แต่ละ select box มีข้อมูล รุ่น modal ปี อยู่ครบ เลือกอันไหนก่อนก็ได้
แต่ละ event ของการ select ก็คือ on change เมื่อมีการ เลือกข้อมูลใน select box ของแต่ละอัน
ให้ไปทำการ ajax ข้อมูลมา โดยเช็ค selectbox ของตัวอื่นด้วยว่ามี ค่าหรือเปล่า
เช่นคุณ select model รถ พอเลือกปุ๊บ ajax ก็ไป select ข้อมูลรถ model นี้ออกมา
โดยส่ง ตัวแปรไปว่า ยี่ห้อ อะไร รุ่นไหน ปีไหน ถึงไหน ถ้า อันไหนไม่เลือก ก็ไม่ต้องส่งค่าไป แล้ว ส่งค่ากลับมา append ใน table
หรือ คุณจะ lock ไว้ ว่าต้องเลือก รุ่นก่อน ถึงเลือก model ได้
คุณก็ ทำแบบตัวอย่างที่ผมทำไป คือ ไปขอข้อมูล รุ่น จากยี่ห้อที่เลือกมา ละ หยอดลงไปใน select model
นอกจาก ส่งรุ่นมา ให้ส่งข้อมูลรถยี่ห้อ นี้มาด้วย ก็ไป append ใน table
|
| |
|
|
| |
| Date :
2016-01-19 14:51:08 |
By :
progamer2000 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
