Ajax PHPで3段階の連携メニューを実装する方法-PHPの問題-php.cn

Ajax PHPで3段階の連携メニューを実装する方法

藏色散人

リリース： 2023-03-12 19:34:01

オリジナル

2323 人が閲覧しました

3 レベルのリンケージメニューを実装する Ajax PHP メソッド: 1. 「sanjiliandong_fengzhuang.js」を参照するページを作成します; 2. ドロップダウンメニューのロジックを実装します; 3. ドロップダウンメニューにイベントを追加します-down メニュー項目; 4. AJAX を介してデータベースを走査; 5. データ処理ページを作成します。

Ajax PHPで3段階の連携メニューを実装する方法

この記事の動作環境: Windows 7 システム、PHP バージョン 7.1、Dell G3 コンピューター。

#php ajax php は 3 レベルのリンケージメニューをどのように実装しますか?

php ajax の 3 レベルのリンケージドロップダウンメニュー

3 段階の連携メニューをカプセル化しますカスケード連携により、どのページからでも参照できるようになります

まず、この js

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>三级联动</title>
        <script src="../jquery-1.11.2.min.js"></script> //引入的jQuery的包
        <script src="sanjiliandong_fengzhuang.js"></script>  //引入下面的写的三级联动的封装js
</head>
    
<body>
    	<p id="sanji">
        　　　//引用的三级联动js
        </p>
</body>

ログイン後にコピー

1 を参照するページを作成します。ページがロードされるので、最初に # を書く必要があります。##

$(document).ready(function(e) {
   　　//写入方法
});

ログイン後にコピー

最初に州、市、地区のメソッド名を書くことができます

//填充省的方法
function FillSheng()
{
　　//方法的功能
}
//填充市的方法
function FillShi()
{
　　//方法的功能
}
//填充区的方法
function FillQu()
{
　　//方法的功能
}

ログイン後にコピー

2。最初にドロップのロジックを検討してください。 -down メニューを作成し、急いで関数を作成しないでください: ページがロードされた後、3 つのドロップダウンメニューが表示され、メニューの要素は選択され、各メニューにメソッドを記述するのに便利な名前を付けます。 ##

var str = "<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>";  //三个下拉菜单项
$("#sanji").html(str);  //将菜单交个要使用这个封装的页面的p中

ログイン後にコピー

3. 実行中は、都道府県、市、区が順に表示され、メソッドを記述できます(1の注)

FillSheng();  //填充省的方法
FillShi();  //填充市的方法
FillQu();  //填充区的方法

ログイン後にコピー

4. 3つのメニュー項目はリンクしています、つまり、さまざまな州に応じてさまざまなオプションがあります

ドロップダウンメニュー項目にイベントを追加できますが、ここでは使用しません。イベントをクリックすると、変更イベントchange()を使用できます

(1) 都道府県をクリックすると、市区町村の表示が変わります

$("#sheng").change(function(){  //改变省，下面的市和区显示
　　FillShi();
　　FillQu();
})

ログイン後にコピー

(2) 市をクリックすると、地区の表示が変わります

$("#shi").change(function(){  //这里就是改变区的
　　FillQu();
})

ログイン後にコピー

このように、ロジックは上で説明されており、以下は各メソッドの関数を記述することです

5. 州を埋めるメソッド

これはテーブルの情報によって異なります、私のテーブルは次のようになります:

パターンを見るのは難しくありません。市外局番と親コードがわかります。11---親の 11 を通して、親の 11 もわかります。つまり、対応する都市は州を通じて見つけることができ、次に対応する地区は 1101 を通じて見つけることができます---親の 1101、つまり対応する地区は都市を通じて見つけることができます

中国には省が 1 つしかないため、コード名「0001」を直接定義し、AJAX を介してデータベースを横断して中国に属する省を見つけます。

function FillSheng()
{
	var pcode = "0001";   //定义的代号是0001
	$.ajax({
	　　async:false,  //默认是同步的，false是异步进行
	　　url:"sanjiliandong_chuli.php",  //处理数据的处理页面
	　　data:{pcode:pcode},  
	　　type:"POST",  //数据传输方式
	　　dataType:"TEXT",
	　　success: function(data){
		　　//处理页面结束后执行的代码
		}
	});
}

ログイン後にコピー

データ処理ページ:

<?php
include("DBDA.class.php");  //调用封装好的数据库
$db = new DBDA();  //造新对象

$pcode = $_POST["pcode"];  //取出传过来的值

$sql = "select * from chinastates where parentareacode=&#39;{$pcode}&#39;";  //找出父级代号等于传过来的值得全部信息

echo $db->StrQuery($sql);  //执行代码，转换为字符串类型：封装的转变方式在上一篇随笔中写过一遍

ログイン後にコピー

処理ページ実行後、ajaxメソッド成功後のメソッド

を書き終わった後のステートメントは文字列なので分割し、行と列をアンパックする必要があります。結果は、地方のドロップダウンメニュー

var hang = data.split("|");  //拆分行，根据“|”
var str = "";
for(var i=0;i<hang.length;i++)
{
	var lie = hang[i].split("^"); //拆分列，根据“^”
	str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>"; //显示索引是1的也就是名称那一列，菜单项的值是表中的地区代号那一列
}
$("#sheng").html(str); //结果放入省的下拉菜单

ログイン後にコピー

に渡され、js を参照するページが実行されます。結果は次のとおりです:

6. 都市と地区を入力する方法

その記述は州のそれに似ており、処理ページは同じです。違いは転送される値です

//填充市的方法
function FillShi()
{
　　//方法的功能，除了这两项不一样，其他的都一样
}

ログイン後にコピー

都市メニューで州を満たす値を定義します。最後のトラバーサルの終わりに、値は都市のドロップダウンメニューに書き込まれます。

var pcode = $("#sheng").val();  //将省的值在市中

ログイン後にコピー

ajax トラバーサルの終わりに、値は都市のドロップダウンメニューに書き込まれます。Menu

$("#shi").html(str);

ログイン後にコピー

//填充区的方法
function FillQu()
{
　　//方法的功能，除了这两项，其他的都没变过
}

ログイン後にコピー

このエリアは、塗りつぶされた都市の値を定義します。前回のトラバース時に、その値はエリアのドロップダウンメニューに書き込まれます。

var pcode = $("#shi").val();   //将市值定义在区中

ログイン後にコピー

Ajax トラバーサルの最後に、値は地区のドロップダウンメニューに書き込まれます

$("#qu").html(str);

ログイン後にコピー

最終的な効果はドロップダウンメニューを変更し、市と地区の両方のドロップダウンメニューが

になります。

推奨学習: 「

PHP ビデオチュートリアル

」

以上がAjax PHPで3段階の連携メニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。