jQuery+PHP+MySQL 2級連動ドロップダウンメニュー例説明

二級連動ドロップダウンメニューの選択は多くの場所で応用されており、例えば省市ドロップダウン連動、商品サイズ類ドロップダウン選択連動である.ここでは、jQuery+PHP+MySQLを使用して、サイズ分類の2段階ドロップダウン連動効果を実装する例を説明します.実装効果:大クラスを選択すると、小クラスドロップダウンボックスのオプションの内容も変更されます.
実装原理:大クラスの値に基づき、jQueryによりバックグラウンドPHP処理に値を渡し、PHPはMySQlデータベースを検索することにより、対応する小クラスを得、JSONデータをフロントエンド処理に返す.XHTMLではまず、2つのドロップダウン選択ボックスを作成します.1つ目は大クラス、2つ目は小クラスです.大クラスの値は、予め書いておいてもよいし、データベースから読み出してもよい.

  ： 
 
       
       
      
 
  ： 
 
flash 
ps 
 

jQueryはまず関数を書き、大きな種類の選択ボックスの値を取得し、$を通過する.getJSONメソッドはバックグラウンドサーバに渡す.phpは、バックグラウンドから戻るJSONデータを読み出し、$.eachメソッドはJSONデータを遍歴し,対応する値を1つのoption文字列に書き込み,最後にoptionを小クラスに追加する.

function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); //        
    $.each(json,function(index,array){ 
      var option = ""+array['title']+""; 
      smallname.append(option); 
    }); 
  }); 
} 

注意、JSONデータの追加を巡る前に必ず小類の元の項目をクリアしてください.オプションを空にする方法は2つあります.1つは、上記のコードで説明した方法と、より簡単で直接的な方法です.

smallname.(); 

次に、ページの読み込み後に呼び出し関数を実行します.

$(function(){ 
  getSelectVal(); 
  $("#bigname").change(function(){ 
    getSelectVal(); 
  }); 
}); 

ページの初期には、ドロップダウンボックスがオプションを設定するので、初期にはgetSelectVal()が呼び出され、大クラスのオプションが変更されるとgetSelectVal()も呼び出されます.PHP

include_once("connect.php"); //      
 
$bigid = $_GET["bigname"]; 
if(isset($bigid)){ 
  $q=mysql_query("select * from catalog where cid = $bigid"); 
  while($row=mysql_fetch_array($q)){ 
    $select[] = array("id"=>$row[id],"title"=>$row[title]); 
  } 
  echo json_encode($select); 
} 

jQueryから渡された大クラスのvalue値に基づいてSQL文クエリー分類表を構築し,最終的にJSONデータを出力する.当駅で特に説明しないで使用したPHPはMySQLと接続し、クエリ文などはすべて元の文の方法を使用してmysql_queryなどは,読者がデータの転送クエリを直感的に知ることを目的としている.最後にMYSQL表構造を添付します.

CREATE TABLE `catalog` ( 
 `id` mediumint(6) NOT NULL auto_increment, 
 `cid` mediumint(6) NOT NULL default '0', 
 `title` varchar(50) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

以上、jQuery+PHP+MySQLの3つを組み合わせてどのように実現するかの2級連動ドロップダウンメニューを紹介しましたが、プログラムにはまだいくつかの不足点があり、引き続き改善する必要があります.