作者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/cn.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