0

我有与主类别相关的子类别。我的子 cat 表有主类别 id 作为外键。我想使用 javascript 预加载所有子类别，并尽可能避免额外的 php 文件或 db 查询。

两个下拉列表都列出了所有记录，但是...我希望我的第二个子类别下拉列表根据第一个下拉列表的值（即主猫 ID）动态更改第一个下拉列表的 onChange（选择）。

例子，

$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>

……

4

2 回答 2

1

创建一个按类别 id 加载子类别的二维 javascript 数组，然后在第一个更改时重新加载第二个下拉列表。高度简化的 jsfiddle 示例。

对于 php，您只需要担心生成subCats数组。类似于以下内容：

<script type="text/javascript>
    var subCats = [
    <?php foreach($data2 as $row){
        echo "[";
        foreach($row as $subcat) {
            echo "\"" . $subcat . "\",";
        }
        echo "]";
    } ?>
</script>
于 2013-02-11T19:43:23.580 回答
0

just.another.programmer 让我走上了正确的道路，还有来自 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>
于 2013-02-13T22:57:14.077 回答