作者b8211290 (R.V. 紅青菜)
看板Ajax
標題[問題] AJAX 菜鳥新手發問，關於二層式下拉選單
時間Tue Jun 2 05:21:51 2015
各位大大你們好
想請教一下，關於二層式下拉式選單，第一層選定後
要如何 利用 AJAX 把值導出，存進本頁的 PHP 變數裡?
網路上相關的選單範例爬文好久，還是試不太出來
例如：
第一層選單 內容為 批號 A1、A2、A3、A4
我想要將 使用者所選的選項 儲存至 本頁 的 PHP 變數 $select1
然後透過 $select1 的值，要去 MySQL 裡面撈資料，做為 第二層的選項
資料表如下：
id | T_id
A1 | T1
A1 | T2
A1 | T3
A2 | T1
A2 | T2
A3 | T1
A3 | T2
A3 | T3
A3 | T4
小弟在此先感謝各位大大的解答 麻煩各位了 !!!!!!
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.173.77.138
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1433193715.A.DF1.html
1F：→ y2468101216: 我覺得你應該搞錯了什麼 ajax取出的資訊是在js裡面 06/02 09:23
3F：推 Kenqr: 一開始就把所有第二層選單的資料都撈出來建好選單 06/02 11:58
4F：→ Kenqr: 否則使用者選好第一層還要等ajax把第二層傳回來 實在太慢 06/02 11:59
5F：→ b8211290: y大 我知道值是在 js裡，我想知道有沒有辦法讓php讀取 06/02 13:50
6F：→ b8211290: 到 06/02 13:50
7F：→ b8211290: k大，我一開始就全撈出來沒有問題，不過第二層選單，我 06/02 13:51
8F：→ b8211290: 需要隨著第一層選取的項目跟著變化 06/02 13:51
9F：→ b8211290: 例如 選 A1 要出現 T1 T2 T3，選A2 要出現 T1 T2 06/02 13:53
10F：→ KawasumiMai: 如果數量不是很多，從一開始用json回傳整個架構是 06/02 13:57
11F：→ KawasumiMai: 可能的，也比較快。js執行後修改"本頁"的php變數印象 06/02 13:58
12F：→ KawasumiMai: 中是可能的，但這寫法不太好。如果你純粹只是要利用 06/02 13:58
13F：→ KawasumiMai: ajax去要求下一層資料，應該是點選後直接呼叫ajax利 06/02 13:59
14F：→ KawasumiMai: 用傳入值去跟後端要資料，不需要修改到本頁php變數 06/02 13:59
15F：→ b8211290: 網路上很多範例我測試過，第一層資料能正常抓出來，不過 06/02 14:17
16F：→ b8211290: 第二層資料卻出不來，我也不知道哪個環節錯了，能求一下 06/02 14:17
17F：→ b8211290: 範例嗎? 06/02 14:17
18F：→ KawasumiMai: 怎樣的出不來？點選呼叫的時候要把選擇結果傳到呼叫 06/02 15:33
19F：→ KawasumiMai: ajax的function去再丟給後端。 06/02 15:34
20F：→ joedenkidd: 你先試看看，select取值要用id，當抓到資再用ajax後送 06/02 20:52
21F：→ joedenkidd: ，你先確定第一個select值有沒有抓到 06/02 20:54
22F：→ b8211290: 剛下班回家，我再試試看，謝謝各位大大解答 06/02 23:33
目前我寫這樣：
--------------------
test.php
--------------------
<form method="POST" action="factor_design_save.php"
enctype="application/x-www-form-urlencoded">
實驗批號：<br>
<select name="eid" id="eid">
<option value="0">請選擇</option>
<?php
// 取得第一層option資料
$link = mysql_connect("127.0.0.1", "root", "")or die("unable to connect
mysql". mysql_error());
mysql_select_db("experiment");
mysql_query("SET NAMES uft8");
$query = "SELECT DISTINCT Exp_id FROM team";
$result = mysql_query($query, $link);
while ( $row = mysql_fetch_assoc($result) ) {
echo '<option value="'.$row["Exp_id"].'">'.$row["Exp_id"].'</option>'."\n";
}
?>
</select><br>
組號：<br>
<select name="tid" id="tid">
<option value="0">請選擇批號</option>
<script>
$(document).ready(function(){
$('#eid').change(function(){
//更動第一層時第二層清空
$('#tid').empty().append("<option value='0'>請選擇批號</option>");
$.ajax({
type: "GET",
url: "action.php",
data: {data:$('#eid option:selected').val()},
datatype: "json",
success: function(result){
//當第一層回到預設值時，第二層回到預設位置
if(result == "0"){
$('#tid').val($('option:first').val());//pseudo selector
}
//依據第一層回傳的值去改變第二層的內容
var i=0;
while ( i < result.length ) {
$("#tid").append("<option
value='"+result[i]+"'>"+result[i]['T_id']+"</option>");
i++;
}
},
error: function(error){
alert( "error" );
}
});
});
});
</script>
</select><br>
<input type="submit">
</form>
--------------------
action.php
--------------------
<?php
//return json format
header('Content-Type: application/json;charset=utf-8');
$link = mysql_connect("127.0.0.1", "root", "")or die("unable to connect
mysql".mysql_error());
mysql_select_db("experiment");
mysql_query("SET NAMES uft8");
$Exp_id = $_GET['data'];//get ajax data 'Exp_id'
$jarray = array();//使用array儲存結果，再以json_encode一次回傳
if ( $Exp_id != 0 ) {
$query = "SELECT t_id FROM team Where exp_id=".$Exp_id;
$result = mysql_query($query, $link);
//fetch_assoc return [{},{}]
//fetch_row return[[],[]]
//fetch_object return[{},{}]
//fetch_array return [{},{}]
while ($row = mysql_fetch_assoc($result)) {
$jarray{} = $row; //這邊如果我用 [ ] 選單出不來，用 { } 內容不是我要的 (暈..
}
} else {
echo 0;
return;
}
echo json_encode($jarray);
return;
?>
※ 編輯: b8211290 (1.173.77.138), 06/03/2015 03:11:25
※ 編輯: b8211290 (1.173.77.138), 06/03/2015 03:14:02
23F：→ b8211290: 麻煩各位大大幫忙看一下是哪裡出問題了，謝謝 06/03 03:15
24F：→ KawasumiMai: $jarray{} = $row ? 這是while迴圈，每讀一行都取 06/03 13:48
25F：→ KawasumiMai: 一次覆蓋？ 應該要用array_push吧? 06/03 13:48
26F：→ hwChang: 先用 alert 或 console.log 看一下 select 的值 06/19 22:01
27F：→ hwChang: 同樣的，在 success 看一下 result 得到什麼 06/19 22:02