最初はデータベースの設計です。分類テーブルは、cate と呼ばれます。
私が行っているのは、分類されたデータの第 2 レベルのリンクです。データに必要なフィールドは、id、name (中国名)、pid (親 ID) です。
の設定です。親 ID: データに前のレベルがない場合、親 ID は 0 です。上位レベルがある場合、親 ID は上位レベルの ID になります。
データベースにコンテンツが追加されたら、セカンダリ リンケージを実装するコードの作成を開始できます。
まず、バックグラウンド PHP で pid 0 のすべてのデータを取得し、$cate に保存し、次に foreach ループを使用して最初のレイヤーの
HTML コード:
<select name="type" size="1" id="type">
<option>请选择类型</option>
<foreach name='cate' item='v'>
<option value="{$v['ca_id']}">{$v.ca_name}</option>
</foreach>
</select>
标签：
<select name="lable" size="1" id="lables">
</select>Ajax コード:
$('#type').click(function(){
$(this).change(function(){
var objectModel = {};
var value = $(this).val();
var type = $(this).attr('id');
objectModel[type] =value;
$.ajax({
cache:false,
type:"POST",
url:site.web+"lable",
dataType:"json",
data:objectModel,
timeout:30000,
error:function(){
alert(site.web+"lable");
},
success:function(data){
$("#lables").empty();
var count = data.length;
var i = 0;
var b="";
for(i=0;i<count;i++){
b+="<option value='"+data[i].ca_id+"'>"+data[i].ca_name+"</option>";
}
$("#lables").append(b);
}
});
});
}
);Ajax コードは、最初のレイヤーのタイプが変更された後にトリガーされます。 1.url: バックグラウンドで受信する Ajax のアドレス。
2.データ: 送信 バックグラウンドへのデータは通常、json を使用して転送されます。ここで転送されるのは、選択したクラスの ID 値です。 3.type: transfer メソッド。get メソッドと post メソッドがあります。私は通常、get よりも多くのデータを送信でき、より安全な post を使用します。 4.error: ajax 実行失敗メソッド 5. 成功。 : Ajax の実行メソッド。コールバック関数です。ここで成功を実行するときは、まず empty() を使用して 2 番目のドロップダウン メニューの内容をクリアし、次にバックグラウンドから取得したデータを出力します。 以下は、Thinkphp が ajax データを受信して処理するページです//后台ajax验证 $result = array(); $cate =$_POST['type']; $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select(); $this->ajaxReturn($result,"JSON");
//搜索结果为$result ..... echo json_encode($result);
ThinkPHP の使用体験をさらに共有する - ThinkPHP + Ajax による 2 レベルのリンク ドロップダウン メニューの実装については、PHP 中国語 Web サイトの関連記事にご注目ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
