0

メインカテゴリに関連するサブカテゴリがあります。サブ cat テーブルには、メイン カテゴリ ID が外部キーとして含まれています。javascript を使用してすべてのサブカテゴリをプリロードし、可能であれば余分な php ファイルまたは db クエリを避けたいと思います。

両方のドロップダウンにすべてのレコードがリストされていますが...サブカテゴリの 2 番目のドロップダウン リストを、メインの猫 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 によってサブカテゴリがロードされた 2 次元の JavaScript 配列を作成し、最初のドロップダウンが変更されたときに 2 番目のドロップダウンをリロードします。非常に単純化された jsfiddle の例。

subCatsphp の場合、配列の生成についてのみ心配する必要があります。次のようなもの：

<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 に答える