jQuery PHP MySQL 보조 연결 드롭다운 메뉴 예제 explain_jquery

2차 연계 드롭다운 메뉴 선택은 도, 시 드롭다운 연동, 상품 사이즈 드롭다운 선택 연동 등 다양한 곳에서 활용됩니다. 이 기사에서는 jQuery PHP MySQL을 사용하여 크기 분류의 보조 드롭다운 연결 효과를 얻는 방법을 예제를 통해 설명합니다.
구현 효과: 대 카테고리를 선택하면 하위 카테고리 드롭다운 박스의 옵션도 변경됩니다.

구현 원칙: 주 카테고리의 값에 따라 해당 값은 jQuery를 통해 처리하기 위해 백그라운드 PHP로 전달되어 해당 작은 항목을 가져옵니다. 카테고리를 지정하고 프런트엔드 처리를 위해 JSON 데이터를 반환합니다.
XHTML
먼저 두 개의 드롭다운 선택 상자를 만들어야 합니다. 첫 번째는 주요 카테고리이고 두 번째는 작은 카테고리입니다. 주요 카테고리의 값은 미리 작성해 두거나 데이터베이스에서 읽어올 수 있습니다.

<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 데이터를 탐색하고 추가하기 전에 먼저 하위 카테고리의 원본 항목을 지워야 합니다. 옵션을 지우는 방법에는 두 가지가 있습니다. 하나는 위의 코드에 언급되어 있으며 더 간단하고 직접적인 방법이 있습니다:

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에서 전달한 주요 카테고리 값을 기준으로 분류표를 쿼리하고 최종적으로 JSON 데이터를 출력하는 SQL문을 구성합니다. 특별한 지시사항 없이, 본 사이트에서 사용하는 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을 결합하여 보조 연결 드롭다운 메뉴를 구현하는 방법에 대한 소개입니다. 이 프로그램에는 아직 몇 가지 단점이 있으며 개선이 필요합니다. 이 기사가 여러분에게 영감을 줄 수 있기를 바랍니다.