Question

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

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

实施例，

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

... ..

Answer 1

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

对于php，您只需要担心生成subCats数组。有点像：

<script type="text/javascript>
    var subCats = [
    <?php foreach($data2 as $row){
        echo "[";
        foreach($row as $subcat) {
            echo "\"" . $subcat . "\",";
        }
        echo "]";
    } ?>
</script>

Answer 2

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>

具有预加载选项的辅助下拉列表

2 个答案: