JavaScript+PHP 응용 프로그램 1: 웹 페이지 제작 시 이중 드롭다운 메뉴의 동적 구현

웹페이지 제작시 이런 상황을 자주 접하게 되는데, 메인 드롭다운 메뉴 선택을 통해 서브 드롭다운 메뉴가 동적으로 생성됩니다. 예: 메인 메뉴에는 "포커스 뉴스", "라이프스타일", "기분 이야기"의 세 가지 옵션이 있습니다. "포커스 뉴스"를 선택하면 "국내", "국제", "스포츠"와 같은 하위 메뉴가 자동으로 생성됩니다. ", "엔터테인먼트" 등이 있습니다.

자바스크립트를 사용하면 위의 효과를 쉽게 얻을 수 있습니다. 하지만 문제는 메뉴의 옵션을 데이터베이스(또는 다른 파일)에서 동적으로 추출하는 경우 구현이 쉽지 않다는 점이다. 저자는 필자의 실제 경험을 바탕으로 javascript + php를 이용한 구현 방법을 소개한다. 본 글의 데이터베이스는 mysql을 사용한다. 이 예에서 작성자는 각 양식 제출 후 메뉴 옵션의 이전 선택 상태로 돌아가는 방법도 소개합니다.

기사에서 소개한 PHP의 기능은 데이터베이스에서 메뉴 옵션을 추출하는 것이고, 다른 기능은 자바스크립트 코드를 생성하는 것입니다. 독자는 ASP와 같은 친숙한 해석 언어를 사용할 수 있습니다.

저자는 코드를 단순화하기 위해 메인 메뉴를 HTML로 구성했다고 가정하고, 서브 메뉴는 동적인 디자인이 필요하므로 기본 프레임만 그려보겠습니다.

//메인 메뉴 디자인

포커스 뉴스

라이프스타일

무드 스토리 /값은 아래 메뉴 배열과 동일해야 합니다.

//하위 메뉴 디자인



우리가 고려해야 할 것은 메뉴의 onchange() 이벤트를 위해 어떤 단계를 완료해야 하는지입니다. 일반적인 프로세스는 주 메뉴 옵션을 기반으로 하위 메뉴 항목을 구성하는 것입니다. 하위 메뉴의 항목 텍스트를 미리 설정해 두는 것이 가장 좋습니다. 이 아이디어를 바탕으로 저자는 JavaScript의 조인트 배열을 사용하여 하위 메뉴 옵션을 기록하고 로드 시 PHP에 의해 자동으로 생성됩니다. 따라서 저자는 다음과 같은 자바스크립트 함수 setmenu()를 설계했습니다.

function setmenu(){

menu=array("a","b","c") // Construct 메뉴 연관 배열


$db = new my_db()

$db->database = "** * "; //새 mysql 연결을 구성합니다. 여기서는 phplib가 사용됩니다.

$mmenu = array("a","b","c"); //작성자는 여기서 단순화했습니다.

for ($i=0;$i
$id = $mmenu[$i];

$db-> query( "menuid ='".$id."'");

//메뉴 옵션이 클래스 테이블의 메뉴 필드에 저장되고 menuid가 사용된다고 가정합니다. 메뉴 식별

while ($db->next_record()){

$smenu[] = """.$db->f("menu")." "";

}

if (isset($smenu) && is_array($smenu)){

$str = implode(",",$smenu);

echo "menu[" $id"] =array($str);ntt";

//메뉴 통합 배열 채우기 완료

unset($ smenu); //smenu 변수 삭제

}

?> //php 프로그램 종료

(document) {

id=all("mmenu").value ; //메인 메뉴 값 가져오기

arr_menu=menu[id];

for(i=all( "smenu").options.length;i>=0;i- -){

all("smenu").options.remove(i); //원본 항목을 삭제해야 합니다

}

if (arr_menu.length= =0){

return;

}

for(i=0;i
obj=createelement( "option");

obj.text=arr_class[i];

all("smenu").options. add(obj);

}

}

}

이렇게 하면 문서가 표시될 때마다 php 부분이 자바스크립트 언어로 해석됩니다. , 메인 메뉴를 클릭하면 하위 메뉴가 자동으로 업데이트됩니다. 마찬가지로 독자는 이 아이디어를 기반으로 보다 복잡한 다중 메뉴 옵션을 만들 수 있습니다.

마지막으로 저자는 양식 제출 후 메뉴 항목의 마지막 상태를 유지하는 방법을 간략하게 소개합니다. 실제로 많은 기법이 있지만 저자는 암묵적 변수 방식을 사용한다. 양식에 다음 코드를 추가합니다.





양식의 onsubmit() 이벤트에서 각 암시적 변수에 값을 할당하기만 하면 됩니다. 즉,

document.all("h1").value=document.all("mmenu").selectedindex;

document.all("h2").value=document.all("smenu").selectedindex;

암시적 변수를 사용하기 위해 문서 본문의 onload() 이벤트에서 php를 사용합니다. 메뉴 표시를 제어하는 ​​방법(다른 방법도 사용할 수 있음):


if (!isset($h1)){ //$만 판단하면 됩니다. h1

$h1 = 0;

$h2 = 0;

}

echo "document.all("mmenu").selectedindex=" .$h1.";ntt ";

echo "document.all("mmenu").click();ntt";

echo "document.all("mmenu"). selectedindex=".$h1. ";ntt";

echo "document.all("smenu").selectedindex=".$h2;

?>

이 시점에서 우리는 드롭다운 메뉴의 이중 동적 구현을 ​​달성했습니다.