jQuery と PHP MySQL を組み合わせてセカンダリ リンケージ ドロップダウン リストを実装 [例]_jquery

実装原理: 州の値の変更に従って、sf_id が jQuery を介して処理するためにバックグラウンドの PHP ファイルに渡され、PHP は MySQl データベースにクエリを実行して対応する都市名を取得し、処理のために JSON データをフロントエンドに返します。 、つまり連動効果が得られます！

説明の便宜上、ここでは省を直接指定しています: 河南省 (sf_id=1) 浙江省 (sf_id=2)。都市情報と学生情報用に 2 つのデータ テーブルがそれぞれ作成されます。エンコード方式はすべて utf8!新しいデータベースを作成し、次の SQL ステートメントを実行します。

コードをコピー コードは次のとおりです:

/* 都市テーブル*/
create TABLE IF NOT EXISTS `dishi`(
`ds_id` int(3) auto_increment not null 主キー、
`sf_id` int(3) not null デフォルト '0'、
`ds_name` varchar( 50) null ではありません
);
/* 学生テーブル*/
create TABLE IF NOT EXISTS `xuesheng`(
`xs_id` int(3) auto_increment not null 主キー、
` ds_id` int(3) not null デフォルト '0',
`xs_name` varchar(50) not null
); 次に、フロント デスク シェルフを設定します:

コードをコピーします コードは次のとおりです:

< ;tr>

/tr>

/td> 河南省 浙江省
name="ds_id " id="ds_id" title="都市を選択"
生徒名

詳細については、コードの後のコメントを参照してください:

コードをコピー

コードは次のとおりです:


このファイルは、$.getJSON メソッドを通じてフロント デスクから渡されたパラメーター sf_id を受け取ります。州のsf_idに基づいて対応する都市データを取得し、JSONデータを返します。フロントデスクはjQueryを使用してJSONを変換し、データを処理してに書き込み、連携効果が完了します。




コードをコピー

コードは次のとおりです:

$sf_id = $_GET["sf_id" ]; if(isset($sf_id)){ $q=mysql_query("sf_id = $sf_id から * を選択") while($row=mysql_fetch_array($q)); $select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name']));

}

echo urldecode(json_encode ($select));
}


urlencode() 関数と urldecode() 関数は、中国語データベースの内容が文字化けするのを防ぐためのものです。ここで、JSON がエラーを返さないように、select.php は他のデータを返してはいけないことにも注意してください。

最後に、生徒情報を追加する際にこのエフェクトを使えば編集が必要な生徒情報が渡された場合、編集対象の生徒がいる都市を直接表示できないとの要望がありました。ここで判断する必要があります:

まず上記について判断してください: >

コードをコピー コードは次のとおりです:

$sql ="SELECT * FROM dishi WHERE ds_id=".$ds_id;
$resultds=mysql_query($sql,$conn);
while($listds=mysql_fetch_array($resultds)){ ?>




その後、初めて getVal() 関数を実行する前に判断を行います。手順については、コメント セクションを参照してください。

コードをコピー コードは次のとおりです: $().ready(function() {

//$ds_id が空でない場合は、読み込みを意味します。 フォームのステータスを変更する場合、ページの収支カテゴリーが表示できないことを避けるために、ページが読み込まれたときに getVal() 関数をすぐに呼び出すことはできません。変更するアカウント

//$ds_id が空の場合、この時点で追加フォームをロードすることを意味します。ページがロードされるとすぐに呼び出され、現在の収入と支出のタイプのサブカテゴリが表示されます。
< ?php } ?> (){
getVal();
});


さて、もう終わりです!