jQuery PHP MySQL セカンダリ連携ドロップダウン メニューの例 description_jquery

第 2 レベルのリンクのドロップダウン メニュー選択は、州と都市のドロップダウン リンクや製品サイズのドロップダウン選択リンクなど、多くの場所で使用されます。この記事では、jQuery PHP MySQL を使用してサイズ分類の二次的なドロップダウン リンケージ効果を実現する方法を例を通して説明します。
実装効果: 大カテゴリが選択されると、サブカテゴリのドロップダウン ボックスのオプションも変更されます。

実装原則: 大カテゴリの値に従って、値は jQuery を介して処理するためにバックグラウンド PHP に渡され、PHP は MySQl データベースにクエリを実行して、対応する小さなカテゴリを取得します。カテゴリを定義し、フロントエンド処理用の JSON データを返します。
XHTML
まず、2 つのドロップダウン選択ボックスを作成する必要があります。1 つ目は大カテゴリ、2 つ目は小カテゴリです。大カテゴリの値は事前に書き込んでおくか、データベースから読み取ることができます。

<label>大类：</label> 
<select name="bigname" id="bigname"> 
  <option value="1">前端技术</option> 
  <option value="2">程序开发</option> 
  <option value="3">数据库</option> 
</select> 
<label>小类：</label> 
<select name="smallname" id="smallname"> 
<option value="1">flash</option> 
<option value="2">ps</option> 
</select> 

jQuery
まず、大カテゴリ選択ボックスの値を取得する関数を作成し、それを $.getJSON メソッドを通じてバックエンドの server.php に渡し、バックエンドから返された JSON データを読み取り、$.each メソッドを通じて JSON データを走査します。対応する値を書き込み、最後にオプションをサブクラスに追加します。

function getSelectVal(){ 
  $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){ 
    var smallname = $("#smallname"); 
    $("option",smallname).remove(); //清空原有的选项 
    $.each(json,function(index,array){ 
      var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
      smallname.append(option); 
    }); 
  }); 
} 

JSON データを走査して追加する前に、まずサブカテゴリ内の元の項目をクリアする必要があることに注意してください。オプションをクリアするには 2 つの方法があります。1 つは上記のコードで説明されており、もう 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 によって渡された大カテゴリの値に基づいて分類テーブルをクエリする 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 を組み合わせてセカンダリ リンケージ ドロップダウン メニューを実装する方法の紹介です。このプログラムにはまだいくつかの欠点があり、改善する必要があります。この記事がヒントになれば幸いです。