보조 연결 드롭다운 목록을 구현하기 위해 PHP MySQL과 결합된 jQuery [예]_jquery

구현 원칙: 지방 값 변경에 따라 sf_id는 jQuery를 통해 처리하기 위해 배경 PHP 파일로 전달됩니다. PHP는 MySQl 데이터베이스를 쿼리하여 해당 도시 이름을 가져오고 처리를 위해 JSON 데이터를 프런트 엔드에 반환합니다. 즉, 연계 효과가 달성됩니다!

설명의 편의를 위해 성은 허난성(sf_id=1), 절강성(sf_id=2)으로 직접 지정하고, 도시 정보와 학생 정보에 대해 각각 2개의 데이터 테이블을 생성합니다! 인코딩 방법은 모두 utf8입니다! 새로운 데이터베이스를 생성하고 다음 SQL문을 실행해보세요!

코드 복사 코드는 다음과 같습니다.

/* 도시 테이블*/
존재하지 않는 경우 테이블 생성 `dishi`(
`ds_id` int(3) auto_increment는 null이 아닌 기본 키,
`sf_id` int(3)는 null이 아닌 기본값 '0',
`ds_name` varchar( 50) null이 아님
);
/* 학생 테이블*/
create TABLE IF NOT EXISTS `xuesheng`(
`xs_id` int(3) auto_increment null 기본 키가 아님,
` ds_id` int(3) not null 기본값 '0',
`xs_name` varchar(50) not null
) 그런 다음 프론트 데스크 선반을 설정합니다:

코드 복사 코드는 다음과 같습니다.

;tr>

/tr>

주

허난성 절강성

학생 이름

자세한 내용은 코드 뒤의 주석을 참조하세요.


코드 복사

코드는 다음과 같습니다.


select.php가 핵심 부분입니다. 이 파일은 프론트 데스크에서 $.getJSON 메소드를 통해 전달된 매개변수 sf_id를 받습니다. 지방 sf_id를 기준으로 해당 도시 데이터를 얻은 후 JSON 데이터를 반환합니다. 프론트 데스크는 jQuery를 사용하여 JSON을 변환합니다. 데이터가 처리되어 에 기록되면 연결 효과가 완료됩니다!

코드 복사

코드는 다음과 같습니다. $sf_id = $_GET["sf_id" ]; if(isset($sf_id)){ $q=mysql_query("select * from dishi where sf_id = $sf_id") while($row=mysql_fetch_array($q)){

$select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name']))

}
echo urldecode(json_encode ($select))
}


urlencode() 및 urldecode() 함수는 중국어 데이터베이스 내용이 왜곡되는 것을 방지하기 위한 것입니다! JSON이 오류를 반환하는 것을 방지하려면 select.php가 다른 데이터를 반환해서는 안 된다는 점도 여기서 주의해야 합니다!

마지막으로 이 효과를 학생 정보 추가 시 편리하게 사용할 수 있다는 문의가 있었습니다. 수정해야 할 학생 정보가 통과된 경우 수정하려는 학생이 있는 도시가 바로 표시되지 않습니다! 여기서 판단해야 합니다.

먼저 위 항목에 대해 판단합니다. >

코드 복사 코드는 다음과 같습니다.

$sql ="SELECT * FROM Ds_id=".$ds_id;
$resultds=mysql_query($sql,$conn)
while($listds=mysql_fetch_array($resultds)){ ?>
?>



그런 다음 페이지가 로드되면 처음으로 getVal() 함수를 실행하기 전에 지침을 확인하세요.

코드 복사 코드는 다음과 같습니다. $().ready(function() {

//$ds_id가 비어 있지 않으면 로드를 의미합니다. 양식 상태 수정 시 수입 및 지출 항목이 표시되지 않는 것을 방지하기 위해 페이지 로드 시 즉시 getVal() 함수를 호출할 수 없습니다. 수정할 계정

//$ds_id가 비어 있으면 추가 양식을 로드한다는 의미입니다. 이때 getVal() 함수는 반드시 페이지가 로드되면 즉시 호출되어 현재 수입 및 지출 유형
getVal()
< ?php } ?>$("#sf_id").change(function (){
getVal();
});
})


이제 거의 끝났습니다!