我有与主类别相关的子类别。我的子目录表将主类别id作为外键。我想使用javascript预加载所有子类别，并尽可能避免额外的php文件或db查询。
两个下拉列表都列出了所有记录，但是。。。我希望我的第二个子类别下拉列表在根据第一个下拉列表的值（即主类别id）更改（选择）第一个下拉菜单时动态更改。
示例，
$data = $this->Category->MainCategory->findall();
$this->set('data',$data);
$data2 = $this->Category->SubCategory->findall();
$this->set('data2',$data2);
我的数组如下：
var_dump ($data) =
array(5) {
[0]=> array(1) { ["MainCategory"]=> array(3) { ["id"]=> string(1) "1" ["name"]=> string(10) "Accounting" ["doctype"]=> string(1) "2" } }
[1]=> array(1) { ["MainCategory"]=> array(3) { ["id"]=> string(1) "2" ["name"]=> string(15) "Human Resources" ["doctype"]=> string(1) "2" } }
[2]=> array(1) { ["MainCategory"]=> array(3) { ["id"]=> string(1) "4" ["name"]=> string(5) "Clubs" ["doctype"]=> string(1) "2" } }
[3]=> array(1) { ["MainCategory"]=> array(3) { ["id"]=> string(1) "8" ["name"]=> string(16) "Service" ["doctype"]=> string(1) "2" } }
[4]=> array(1) { ["MainCategory"]=> array(3) { ["id"]=> string(2) "10" ["name"]=> string(9) "Safety" ["doctype"]=> string(1) "2" } } }
var_dump($data2) =
array(20) {
[0]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "1" ["name"]=> string(17) "Application Forms" ["main_category_id"]=> string(1) "2" } }
[1]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "2" ["name"]=> string(19) "Benefit Claim Forms" ["main_category_id"]=> string(1) "2" } }
[2]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "3" ["name"]=> string(22) "Evaluations" ["main_category_id"]=> string(1) "2" } }
[3]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "4" ["name"]=> string(11) "Leave Forms" ["main_category_id"]=> string(1) "2" } }
[4]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "5" ["name"]=> string(13) "Payroll" ["main_category_id"]=> string(1) "2" } }
[5]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "6" ["name"]=> string(17) "Recruitment" ["main_category_id"]=> string(1) "2" } }
[6]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "7" ["name"]=> string(24) "Training" ["main_category_id"]=> string(1) "2" } }
[7]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "8" ["name"]=> string(10) "Accounting" ["main_category_id"]=> string(1) "1" } }
[8]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(1) "9" ["name"]=> string(13) "Staff" ["main_category_id"]=> string(1) "2" } }
[9]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "10" ["name"]=> string(14) "Codes" ["main_category_id"]=> string(2) "3" } }
[10]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "11" ["name"]=> string(28) "Reports" ["main_category_id"]=> string(2) "3" }
[11]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "12" ["name"]=> string(14) "Plan" ["main_category_id"]=> string(2) "4" } }
[12]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "13" ["name"]=> string(21) "Charts" ["main_category_id"]=> string(2) "4" } }
[13]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "14" ["name"]=> string(11) "Travel" ["main_category_id"]=> string(1) "4" } }
[14]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "15" ["name"]=> string(15) "Financials" ["main_category_id"]=> string(1) "4" } }
[15]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "16" ["name"]=> string(19) "Event Planning" ["main_category_id"]=> string(1) "4" } }
[16]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "17" ["name"]=> string(14) "Resources" ["main_category_id"]=> string(1) "4" } }
[17]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "18" ["name"]=> string(11) "Basics" ["main_category_id"]=> string(1) "4" } }
[18]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "19" ["name"]=> string(9) "News" ["main_category_id"]=> string(1) "4" } }
[19]=> array(1) { ["SubCategory"]=> array(3) { ["id"]=> string(2) "20" ["name"]=> string(12) “Funding" ["main_category_id"]=> string(1) "4" } } }
--html表单…。
<td>Category: </td>
<td><select id="main_cat">
<option value=""> </option>
<?php foreach($data as $row){
echo "<option value=".$row['MainCategory']['id'].">" .$row['MainCategory']['name']. "</option>";
} ?>
</select></td>
<td>Sub Category: </td>
<td><select id="sub_cat">
<option value=""> </option>
<?php foreach($data2 as $row){
echo "<option value=".$row[‘SubCategory']['id'].">" .$row['SubCategory']['name']. "</option>";
} ?>
</select></td>
…。。
创建一个二维javascript数组，按类别id加载子类别，然后在第一个更改时重新加载第二个下拉列表。高度简化的jsfiddle示例。
对于php，您只需要担心生成subCats数组。大致如下：
<script type="text/javascript>
var subCats = [
<?php foreach($data2 as $row){
echo "[";
foreach($row as $subcat) {
echo "'"" . $subcat . "'",";
}
echo "]";
} ?>
</script>
just.另一位程序员让我走上了正确的道路，通过Jonathan Kuhn的其他一些例子，这就是结果http://jsfiddle.net/wprLD/9/
<script type="text/javascript">
var subCats =
<?php
$js = array();
foreach($data2 as $sub){
//get the parent id (main_category_id)
$parent = $sub['SubCategory']['main_category_id'];
//if the parent doesn't exist, add it
if(!isset($js[$parent])){
//add array with name and id
$js[$parent] = array(array('id'=>$sub['SubCategory']['id'],'name'=>$sub['SubCategory']['name']));
//parent does exist
} else {
//append this entry name and id
$js[$parent][] = array('id'=>$sub['SubCategory']['id'],'name'=>$sub['SubCategory']['name']);
}
}
$js = array_values($js);
echo json_encode($js);
?>
;
function makeSubCatHtml(catId) {
var subCatHtml = "",
i;
//check if the subcats object has this cat Id.
if(subCats.hasOwnProperty(catId)){
for (i in subCats[catId]) {
subCatHtml += "<option value='"+subCats[catId][i].id+"'>" + subCats[catId][i].name + "</option>";
}
}
return subCatHtml;
}
$(document).ready(function () {
$("#MainCategory").bind("change", function () {
$("#SubCategory").html(
makeSubCatHtml(this.selectedIndex));
});
});
</script>