프레임 간 3단계 연결 선택 드롭다운 옵션의 js 조작 예제 Introduction_javascript 기술

HTML, CSS, Javascript 관련 지식을 활용하여 다중 창 및 다중 메뉴 콘텐츠 연결을 작성합니다.

프레임, 브라우저 개체, 양식 컨트롤, JavaScript 이벤트 트리거 메커니즘 및 프로그래밍에 대한 학생들의 개념과
CSS를 사용하여 텍스트 표시를 구성하는 방법을 검토하여 학생들이 DHTML을 더 깊이 이해할 수 있도록 합니다. 이해.
실험 콘텐츠 [꼭 해야 함]
(1) 세 개의 프레임이 포함된 창 만들기
(2) 첫 번째 프레임1에는 선택 항목이 포함되어 있고 콘텐츠는 중국의 각 성입니다
(3) 두 번째 프레임 2에는 각 지방의 현급 도시가 포함된 선택 항목도 포함되어 있습니다
(4) 세 번째 프레임 3은 특정 현과 도시에 대한 소개를 표시하는 데 사용됩니다.
(5) 프레임1 선택에서 지방을 선택하면 프레임2에서 선택하면 해당 지방의 도시로 자동으로 옵션이 변경됩니다.
(６) 프레임2 선택에서 특정 도시를 선택한 경우 마지막으로 프레임3에 도시 소개를 표시합니다
(7) 소개는 div에 포함되어야 하며 왼쪽 정렬, 파란색 텍스트, 20px, 첫 번째 줄 들여쓰기가 필요합니다.

메뉴 연동 참조 인터페이스 효과

팁: 이 실험을 구현하는 방법은 다양합니다(예: CSS 버전, dom 버전, ajax 버전, 프로토타입 버전) ) , 학생들은 구현 방법만 선택하면 됩니다.

메뉴 연동 테스트 관련 자료
장쑤성
난징 난징은 장쑤성의 성도이자 풍부한 역사적 유물과 심오한 문화유산을 지닌 6대 고대 수도입니다.
타이저우 타이저우(Taizhou Taizhou)는 천년의 역사를 지닌 현으로 후 회장이 태어난 곳이자 왕 선생님의 고향입니다. 마작, 특히 마작으로 유명합니다.
쑤저우 "위에 천국이 있고 아래에 쑤저우와 항저우가 있다." 쑤저우는 정원으로 유명합니다. 유명한 정원으로는 "겸손한 관리자의 정원", "사자 숲" 등이 있습니다.

절강
항저우(杭州)는 절강성(浙江省)의 성도로, 아름다운 풍경과 지상낙원이 있는 곳으로 '위에는 천국이 있고 아래에는 쑤저우와 항저우가 있다'고 합니다.
원저우는 사업가로 가장 유명합니다. 온주에서는 거의 모든 사람들이 사업에 종사하고 있습니다.
가흥 가흥에 대한 유일한 이해는 가흥 남호에서 열린 역사적인 회의뿐입니다.

광동
광저우 광저우는 경제가 발전했지만 범죄가 만연한 광둥성의 수도입니다!
선전(Shenzhen)은 전국 최초의 경제특구로 경제가 발달했고 광저우처럼 치안이 좋지 않습니다.
주하이(Zhuhai) 주하이(Zhuhai)는 우리나라 최초의 해안 개방 도시 중 하나입니다. 도시는 아름답고 전형적인 해안 도시이며 생활하기에 적합합니다.

모든 독자와 게으른 사람들이 즐길 수 있도록 너무 밋밋하지 않은 js 코드를 작성했습니다.
위 코드:
1.frame_a.htm: 지역 드롭다운 목록 표시

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

프레임 A

< ;form name=" form1" method="post">

/SELECT>





2.frame_b.htm: 특정 ID 드롭다운 목록

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

프레임 B

< ;OPTION 선택됨>







3.frame_c.htm: 해당 도시 설명을 표시합니다

코드 복사

코드는 다음과 같습니다.

프레임 C

< ;/div>



4,index.htm: 글로벌 프레임워크, 마스터 제어 페이지

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

script 언어="javascript" type="text/javascript">
var Provinces = new Array();
provinces[0] = "Jiangsu"
provinces[1] = "Zhejiang";
지방[2] = "광동";
var 도시 = new Array();
cities[0] = new Array()
cities[0][0] = "난징" ;
cities[0][1] = "타이저우";
cities[0][2] = "쑤저우";
cities[1] = new Array(); ][0] = "항저우";
cities[1][1] = "원저우";
cities[1][2] = "가흥"
cities[2] = new Array( );
cities[2][0] = "광저우";
cities[2][1] = "심천";
cities[2][2] = "주하이"; var 설명 = new Array();
descriptions[0] = new Array();
descriptions[0][0] = "난징은 장쑤성(江蘇省)의 수도로, 6개 왕조의 수도였습니다. 역사적 유물과 심오한 문화유산 ";
설명[0][1] = "태주는 후 회장이 태어난 천년의 현이며 왕 선생님의 고향으로 유명합니다. 마작, 특히 마작.";
descriptions[0][ 2] = "위에 천국이 있고 아래에 쑤저우와 항저우가 있습니다. 쑤저우는 정원으로 유명합니다. " Lion Grove" 등이 있습니다.";
descriptions[1] = new Array();
descriptions[1][0] = "항저우는 절강성(浙江省)의 수도로, 아름다운 "위에는 천국이 있고 아래에는 쑤저우와 항저우가 있다"고 합니다.
설명[ 1][1] = "원저우는 사업가로 가장 유명합니다. 전국민의 미움을 받는 온주 부동산 투기꾼들이 대표적이다! ";
descriptions[1][2] = "가흥에 대한 나의 이해는 여전히 가흥 남호에서 열린 역사적인 회의에 있습니다.";
descriptions[2] = new Array();
descriptions[2 ][0] = "광저우는 경제가 발전했지만 범죄가 만연한 광둥성의 수도입니다! ";
설명[2][1] = "심천은 중국 최초의 경제특구입니다. 경제가 발전했고, 광저우처럼 인구가 거의 대부분 이민자로 구성되어 있어 치안이 좋지 않습니다. ";
설명[2][2] = "주하이는 우리나라 최초의 해안 개방 도시 중 하나이며, 아름다운 도시이자 전형적인 해안 도시이며, 살기에 적합합니다. ";

var current_province;
var current_city;
function setCity(지방, 도시)
{
// Alert("city");
//frame_b
var obj = window.frames.frame_b.document.getElementById("s2");
var length = 도시[지방].length;
for(i = 0; i < length; i)
obj[i] = new Option(cities[province][i]);
obj[i].selected = "false";
}
obj[city].selected = true;
current_city = 도시
setCityDescription(지방, 도시);
}
function setCityDescription(지방, 도시)
{
//alert("설명"); //frame_c
var obj = window.frames.frame_c.document.getElementById("description");
obj.innerHTML = 설명[province][city];


function setProvince(province)
{
// 경고("province")
// var obj = window.frames.frame_a.document.getElementById("s1"); / var obj = window.frames["frame_a"].document.getElementById("s1");
//var obj = window.frames[0].document.getElementById("s1"); / var obj = window.frames["frame_a"]; //.document.getElementById("s1");
// obj = obj.document.getElementById("s1")
var obj = window .frames["frame_a"].document.getElementById("s1"); //Chrome의 도메인 간 액세스 확인은 로컬에서 표시할 수 없으므로 서버에 업로드하면 올바르게 표시됩니다.
var length = Provinces.length;
for(i = 0; i < length; i) {
obj[i] = new Option(provinces[i])
obj[i ].selected = "false";
obj[province].selected = "true";
current_province =
var city = 0; ;
//setCityDescription(지방, 도시);

function init(지방, 도시)
{
setProvince(지방)
setCity(지방, 도시) );
setCityDescription(지방, 도시);
var obj = window.frames.frame_a.document.getElementById("s1")
obj.onchange = Function("setProvince(this.selectedIndex)" );
// 경고(obj.selectedIndex);

var obj = window.frames.frame_b.document.getElementById("s2")
obj.onchange = Function("setCity( current_province, this.selectedIndex)");
// Alert(obj.selectedIndex);
}







< ;/프레임세트>

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.