The use of HTML, CSS and JavaScript-related knowledge, to write a multi-window multi-menu content linkage.
To examine the students ' concepts of frame, browser object, and form control, JavaScript event triggering mechanism and program design,
and the use of CSS to organize the mastery of the text display, so that students have a more profound understanding of DHTML.
Experimental content "must do"
(1) Create a window containing three frame
(2) The first frame1 contains a select, the contents of which are the provinces of China
(3) The second frame2 also contains a select, the content of which is prefecture-level cities in each province
(4) The third frame3 is used to show the introduction of a certain city.
(5) When a province is selected in the Selecet of Frame1, the select in frame2 automatically turns the option into the saved city
(6) The introduction of the city in Frame3 after select a place in frame2
(7) The introduction request with the div to accommodate, occupies the left alignment, the blue Word, 20px, the first line indents.
Effect of menu linkage reference interface
Hint: This experiment can be implemented in a variety of ways (for example: CSS version, Dom version, AJAX version, prototype version can be implemented), the students only need to choose a way to achieve.
Menu linkage test related data
Jiangsu
Nanjing Nanjing is the capital of Jiangsu Province, the ancient capital of the Six dynasties, rich historical relics, profound cultural background.
Taizhou Taizhou is thousand years old county, Hu president was born place, the hometown of teacher Wang, to three hemp famous, especially famous mahjong.
Suzhou "On a paradise, under the Suzhou and Hangzhou", Xuzhou to the garden and famous, the famous garden has "humble political garden", "Lion forest" and so on, outstanding, literati.
Zhejiang
Hangzhou is the capital of Zhejiang province, beautiful scenery, the world fairyland, the so-called "there is heaven, under the Suzhou and Hangzhou."
Wenzhou Wenzhou is the most famous is the businessman, Wenzhou people almost everyone in business, the whole country hate the Wenzhou fried House is the representative of the group!
Jiaxing's understanding of Jiaxing, or stay on the South Lake in Jiaxing held the historic conference.
Guangdong
Guangzhou Guangzhou is the provincial capital of Guangdong Province, the economy developed, but rampant crime!
Shenzhen Shenzhen is the country's first special economic zone, the economy developed, almost all the mouth of outsiders, like Guangzhou, Law and order is not good.
Zhuhai Zhuhai is one of the first group of open cities in China, the city is beautiful, typical seaside city, suitable for habitation.
Wrote a shit taste is not too strong JS code, for you reader and lazy eggs to enjoy.
Code on:
1.frame_a.htm: Displays a drop-down list of provinces province
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
</script>
<body >
<form name= "Form1" method= "POST" >
<select id= "S1" name= "S1" >
<option selected></option>
</SELECT>
</form>
</body>
2.frame_b.htm: A drop-down list of all city cities that show an identity
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<body>
<form name= "Form2" method= "POST" >
<select id= "s2" name= "S2" >
<option selected></option>
</SELECT>
</form>
</body>
3.frame_c.htm: Shows the corresponding city description description.
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<body>
<div id= "description" ></div>
</body>
4,index.htm: Global Framework, master page.
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<script language= "javascript" type= "Text/javascript" >
var provinces = new Array ();
Provinces[0] = "Jiangsu";
PROVINCES[1] = "Zhejiang";
PROVINCES[2] = "Guangdong";
var cities = new Array ();
Cities[0] = new Array ();
Cities[0][0] = "Nanjing";
CITIES[0][1] = "Taizhou";
CITIES[0][2] = "Suzhou";
CITIES[1] = new Array ();
Cities[1][0] = "Hangzhou";
CITIES[1][1] = "Wenzhou";
CITIES[1][2] = "Jiaxing";
CITIES[2] = new Array ();
Cities[2][0] = "Guangzhou";
CITIES[2][1] = "Shenzhen";
CITIES[2][2] = "Zhuhai";
var descriptions = new Array ();
Descriptions[0] = new Array ();
Descriptions[0][0] = "Nanjing is the capital of Jiangsu Province, the ancient capital of the Six dynasties, rich historical relics, profound cultural background";
DESCRIPTIONS[0][1] = "Taizhou is thousand years old county, Hu president is born place, the hometown of teacher Wang, with three hemp famous, among them is famous for mahjong especially";
DESCRIPTIONS[0][2] = "There is heaven, Suzhou and Hangzhou, Xuzhou to the garden and famous, the famous garden has" humble political garden "," Lion forest "and so on, outstanding, literati. ";
DESCRIPTIONS[1] = new Array ();
Descriptions[1][0] = "Hangzhou is the capital of Zhejiang province, the scenery is beautiful, the world Fairyland, the so-called" there is heaven, under the Suzhou and Hangzhou. ";
DESCRIPTIONS[1][1] = "Wenzhou's most famous is the businessman, Wenzhou people almost everyone is doing business, the whole country hates the Wenzhou Fry House Regiment is the representative!" ";
DESCRIPTIONS[1][2] = "The understanding of Jiaxing, or stay on the South Lake in Jiaxing held the historic conference";
DESCRIPTIONS[2] = new Array ();
Descriptions[2][0] = "Guangzhou is the provincial capital of Guangdong province, economically developed, but rampant crime!" ";
DESCRIPTIONS[2][1] = "Shenzhen is the first special economic zone in China, the economy is developed, almost all are outsiders, like Guangzhou, Law and order is not good." ";
DESCRIPTIONS[2][2] = "Zhuhai is one of the first group of open cities in China, the city is beautiful, typical seaside city, suitable for habitation." ";
var current_province;
var current_city;
function Setcity (province, city)
{
Alert ("City");
Frame_b
var obj = window.frames.frame_b.document.getElementById ("s2");
var length = Cities[province].length;
for (i = 0; i < length; ++i) {
Obj[i] = new Option (Cities[province][i]);
obj[i].selected = "false";
}
Obj[city].selected = true;
current_city = City;
Setcitydescription (province, city);
}
function Setcitydescription (province, city)
{
Alert ("description");
Frame_c
var obj = window.frames.frame_c.document.getElementById ("description");
obj.innerhtml = descriptions[province][city];
}
function Setprovince (province)
{
Alert ("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"); Because the chrome check for Cross-domain access is not visible locally, it is displayed correctly on the upload to the server.
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 = Province;
var city = 0;
Setcity (province, city);
Setcitydescription (province, city);
}
function init (province, city)
{
Setprovince (province);
Setcity (province, city);
Setcitydescription (province, city);
var obj = window.frames.frame_a.document.getElementById ("S1");
Obj.onchange = Function ("Setprovince (This.selectedindex)");
alert (Obj.selectedindex);
var obj = window.frames.frame_b.document.getElementById ("s2");
Obj.onchange = Function ("Setcity (current_province, This.selectedindex)");
alert (Obj.selectedindex);
}
</script>
<frameset cols= "35%,65%" onload= "init (0, 0);" >
<frame src= "frame_a.htm" name= "Frame_a" >
<frameset rows= "50%,50%" >
<frame src= "frame_b.htm" name= "Frame_b" >
<frame src= "frame_c.htm" name= "Frame_c" >
</frameset>
</frameset>
5. PostScript：
1 Flexibility: function init (province, City) when the page onload, you can specify the initial display of cities. Bidding rankings.
2 Scalability: You can increase support for more cities by increasing the number of data sources in the array. Data source, you can implement the dynamic Data source through the XML file, or Ajax way, using DOM operation.
3 cross-domain problem: Because Chrome has cross-domain checks on the frame, the page cannot be displayed if it is not set locally. However, upload to the server, yes, no problem.
