検索
ホームページバックエンド開発PHPチュートリアルAjax 3 レベルリンケージドロップダウンメニューを実装するサンプルコード

Ajax 3 レベルリンケージドロップダウンメニューを実装するサンプルコード

Mar 23, 2017 pm 02:11 PM
ajaxレベル 3 の連携ドロップダウンメニュー

この記事では、Ajax 3 レベル リンケージ ドロップダウン メニューを実装するサンプル コードを紹介します

ajax で 3 レベル リンケージを作成するには、まずファイル クラスを作成します。後で使用するときに直接呼び出すことができます。 ;

テーブルを探す:

Ajax 3 レベルリンケージドロップダウンメニューを実装するサンプルコード

中国の3つのレベルの連携: 、都市、地区

写真:

Ajax 3 レベルリンケージドロップダウンメニューを実装するサンプルコード アイデアについて話しましょう:

(1) ユーザーが州を選択すると、イベントがトリガーされ、現在の州 ID がサーバー プログラムに送信されます。 ajax リクエストを介して

( 2) たとえば、中国地域を例にとると、中国は 0001、独自のコード 0001 を持つものが中国地域です

北京のコードは 11 です。サブコード 11 は北京の都市部です

つまり、メインコード番号に従ってサブコード番号をクエリします

(3) サーバーはクエリを実行します。クライアントのリクエストに従ってデータベースを作成し、特定の形式でクライアントに返します

表示ページは非常にシンプルで、p が必要で、js ファイルと jquery ファイルを導入するだけです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="sanji.js"></script>
</head>
<body>
<h1 id="三级联动">三级联动</h1>
<p id="sanji"></p>
</body>
</html>

3 つ必要ですドロップダウン ボックスを選択し、ID の書き込みメソッドを指定します

まず、3 つのドロップダウン ボックスを書き込み、ID を添付し、3 つのメソッドを実行します:

$(document).ready(function(e){
    //三个下拉列表
    //加载显示数据
    $("#sanji").html("<select></select><select></select><select></select>");
    //加载省份

    FillSheng();
    //加载市
    FillShi();
    //加载区
    FillQu();
}

次に、書き込みますメソッド;


3 つのメニューはリンクされています。つまり、異なる州に応じて異なるオプションが存在する可能性があります ここでは click() クリック イベントを使用しないでください。州を変更するときに実行される()

(1) 州が変更された場合:

 //当省份发生变化
    $("#sheng").change(function(){
        FillShi();

        FillQu();
    })

都市部、地区、郡が変更された場合


(2)都市部の変更:

 //当市发生改变
    $("#shi").change(function(){
        FillQu();
    })
});

地区と郡の変更


次のステップは、州の情報を大まかにロードすることです。そして、ajax トラバーサルの最後に、値が都市のドロップダウン メニューに書き込まれます:

//加载省份信息
function FillSheng()
{
    //根据父级代号
    //取父级代号
    var pcode = "0001";
    //根据父级代号查数据
    $.ajax({
        async:false,
        url:"cl.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"JSON",
        success:function(data)
{
    var str = "";
    for(var sj in data)
    {

        str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
    }
    $("#sheng").html(str);
}
    });
}

//加载市
function FillShi()
{
    //根据父级代号
    //取父级代号
    var pcode = $("#sheng").val();
    //根据父级代号查数据
    $.ajax({
        async:false,
        //取消异步
        url:"cl.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"JSON",
    success:function(data)
{
    var str = "";
    for(var sj in data)
    {

        str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
    }
    $("#shi").html(str);
}
});
}
//加载区
function FillQu()
{
    //根据父级代号
    //取父级代号
    var pcode = $("#shi").val();
    //根据父级代号查数据
    $.ajax({

        url:"cl.php",
        data:{pcode:pcode},
    type:"POST",
        dataType:"JSON",
    success:function(data)
{
    var str = "";
    for(var sj in data)
    {

        str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
    }
    $("#qu").html(str);
}
});
}
使用前の形式は JSON です

注: JSON

JSON は、オブジェクトを渡すための構文です。オブジェクトは、名前と値のペア、配列、その他のオブジェクトです

配列を使用しているため、配列を走査する必要があります。 js で配列を走査するために使用するのは

for(var sj in data){ }

です。フォーマット! ! !

 

这里来写上面说的那个文件封装类,找到我们以前我们的连接数据库的类:

加上这段:

public function jsonQuery($sql,$type=1)
    {
        $db = new mysqli($this->host,$this->zhang,$this->mi,$this->dbname);
        $r = $db->query($sql);
        if($type == "1")
        {
            $arr = $r->fetch_all(MYSQLI_ASSOC);


            return json_encode($arr);
//去掉最后竖线
        }
        else
        {
            return $r;
        }
    }
}

 

嗯,没错

处理页面:

最后来说处理页面:

<?php
$pcode = $_POST["pcode"];
include ("db.class.php");
$db = new db();

$sql = "select * from chinastates where ParentAreaCode = &#39;{$pcode}&#39;";
echo $db->jsonQuery($sql);

连上数据库,对象调用类,写完sql语句直接返回就欧克!!!

就是这么短!

效果图:

Ajax 3 レベルリンケージドロップダウンメニューを実装するサンプルコード

 

相关文章:

用php实现城市地区三级联动 附带数据库

js 实现省市区三级联动菜单效果

Yii2实现中国省市区三级联动实例

以上がAjax 3 レベルリンケージドロップダウンメニューを実装するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
どのデータをPHPセッションに保存できますか?どのデータをPHPセッションに保存できますか?May 02, 2025 am 12:17 AM

phpssionscanStorestrings、numbers、arrays、andobjects.1.strings:textdatalikeusernames.2.numbers:integersorfloatsforcounters.3.arrays:listslikeshoppingcarts.4.objects:complextructuresthataresialized。

どのようにPHPセッションを開始しますか?どのようにPHPセッションを開始しますか?May 02, 2025 am 12:16 AM

tostartaphpsession、outsession_start()atthescript'sbeginning.1)placeitbe foreanyouttosetthesscookie.2)usesionsionsionsionserdatalikelogintatussorshoppingcarts.3)再生セッションインドストップレベントフィックスアタック

セッションの再生とは何ですか?また、セキュリティをどのように改善しますか?セッションの再生とは何ですか?また、セキュリティをどのように改善しますか?May 02, 2025 am 12:15 AM

セッション再生とは、新しいセッションIDを生成し、セッション固定攻撃の場合にユーザーが機密操作を実行するときに古いIDを無効にすることを指します。実装の手順には次のものが含まれます。1。感度操作を検出、2。新しいセッションIDを生成する、3。古いセッションIDを破壊し、4。ユーザー側のセッション情報を更新します。

PHPセッションを使用する際のパフォーマンスの考慮事項は何ですか?PHPセッションを使用する際のパフォーマンスの考慮事項は何ですか?May 02, 2025 am 12:11 AM

PHPセッションは、アプリケーションのパフォーマンスに大きな影響を与えます。最適化方法には以下が含まれます。1。データベースを使用してセッションデータを保存して応答速度を向上させます。 2。セッションデータの使用を削減し、必要な情報のみを保存します。 3.非ブロッキングセッションプロセッサを使用して、同時実行機能を改善します。 4.セッションの有効期限を調整して、ユーザーエクスペリエンスとサーバーの負担のバランスを取ります。 5.永続的なセッションを使用して、データの読み取り時間と書き込み時間を減らします。

PHPセッションはCookieとどのように異なりますか?PHPセッションはCookieとどのように異なりますか?May 02, 2025 am 12:03 AM

phpsesionsareserver-side、whilecookiesareclient-side.1)Sessionsionsionsoredataontheserver、aremoresecure.2)cookiesstoredataontheclient、cookiestoresecure、andlimitedinsizeisize.sesionsionsionivationivationivationivationivationivationivationivate

PHPはユーザーのセッションをどのように識別しますか?PHPはユーザーのセッションをどのように識別しますか?May 01, 2025 am 12:23 AM

phpidentifiesauser'ssessionsingsinssessionCookiesIds.1)whensession_start()iscalled、phpgeneratesauniquesidstoredsored incoookienadphpsessidontheuser'sbrowser.2)thisidallowsphptortorieSessiondatadata fromthata

PHPセッションを保護するためのベストプラクティスは何ですか?PHPセッションを保護するためのベストプラクティスは何ですか?May 01, 2025 am 12:22 AM

PHPセッションのセキュリティは、次の測定を通じて達成できます。1。session_regenerate_id()を使用して、ユーザーがログインまたは重要な操作である場合にセッションIDを再生します。 2. HTTPSプロトコルを介して送信セッションIDを暗号化します。 3。Session_Save_Path()を使用して、セッションデータを保存し、権限を正しく設定するためのSecure Directoryを指定します。

PHPセッションファイルはデフォルトで保存されていますか?PHPセッションファイルはデフォルトで保存されていますか?May 01, 2025 am 12:15 AM

phpsessionFilesToredInthededirectoryspecifiedBysession.save_path、通常/tmponunix-likesystemsorc:\ windows \ temponwindows.tocustomizethis:1)uesession_save_path()tosetaCustomdirectory、ensuringit'swritadistradistradistradistradistra

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。