js manipulation of cross-frame three-level linkage select drop-down option example introduction_javascript skills

Use relevant knowledge of HTML, CSS and Javascript to write multi-window and multi-menu content linkage.

Examine students’ concepts of frame, browser objects, and form controls, JavaScript event triggering mechanism and programming,
and their mastery of using CSS to organize text display, so that students have a deeper understanding of DHTML understanding.
Experimental content [must do]
(1) Create a window containing three frames
(2) The first frame1 contains a select, and the content is each province in China
(3) The second frame 2 also contains a select, which contains prefecture-level cities in each province
(4) The third frame 3 is used to display an introduction to a certain prefecture and city.
(５) When a province is selected in the select of frame1, the select in frame2 will automatically change the available options to the cities in that province
(６) When a certain city is selected in the select of frame2 Finally, display the introduction of the city in frame3
(7) The introduction is required to be contained in div, aligned to the left, blue text, 20px, and the first line indented.

Menu linkage reference interface effect

Tips: There are many ways to implement this experiment (for example: css version, dom version, ajax version, prototype version) ), students only need to choose an implementation method.

Menu linkage test related data
Jiangsu
Nanjing Nanjing is the capital of Jiangsu Province and the ancient capital of six dynasties with rich historical relics and profound cultural heritage.
Taizhou Taizhou is a thousand-year-old county, where Chairman Hu was born and the hometown of Teacher Wang. It is famous for its mahjong, especially mahjong.
Suzhou "There is heaven above, and Suzhou and Hangzhou below." Suzhou is famous for its gardens. Famous gardens include "Humble Administrator's Garden", "Lion Grove", etc. It has outstanding people and literati.

Zhejiang
Hangzhou Hangzhou is the capital of Zhejiang Province, with beautiful scenery and a paradise on earth. It is said that "there is heaven above, and Suzhou and Hangzhou below".
Wenzhou Wenzhou is most famous for its businessmen. Almost everyone in Wenzhou is engaged in business. The Wenzhou real estate speculators who are hated by the whole country are the representatives!
Jiaxing The only understanding of Jiaxing is the historic conference held on Jiaxing South Lake.

Guangdong
Guangzhou Guangzhou is the capital of Guangdong Province, with a developed economy, but rampant crime!
Shenzhen Shenzhen is the first special economic zone in the country. It has a developed economy and almost all immigrants. Like Guangzhou, the public security is not good.
Zhuhai Zhuhai is one of the first coastal open cities in my country. The city is beautiful, a typical coastal city, and suitable for living.

I wrote a js code that doesn’t have too much of a shit flavor for all readers and lazy people to enjoy.
Code above:
1.frame_a.htm: Display the drop-down list of province

Copy code The code is as follows:

Frame A

2.frame_b.htm: Display all cities of a certain identity Drop-down list

Copy code The code is as follows:

Frame B

< ;OPTION selected>

3.frame_c.htm: Display the description of the corresponding city description.

Copy code The code is as follows:

Frame C

4,index.htm: Global framework, master control page .

Copy code The code is as follows:

< 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 six dynasties, with rich historical relics and profound cultural heritage ";
descriptions[0][1] = "Taizhou is a thousand-year-old county, where Chairman Hu was born, and the hometown of Teacher Wang. It is famous for its three kinds of mahjong, especially mahjong.";
descriptions[0][ 2] = "There is heaven above, and there are Suzhou and Hangzhou below. Suzhou is famous for its gardens. Famous gardens include "Humble Administrator's Garden", "Lion Grove", etc., with outstanding people and literati.";
descriptions[1] = new Array();
descriptions[1][0] = "Hangzhou is the capital of Zhejiang Province, with beautiful scenery and a paradise on earth. It is said that "there is heaven above, and Suzhou and Hangzhou below.";
descriptions[ 1][1] = "Wenzhou is most famous for its businessmen. Almost everyone in Wenzhou is engaged in business. The Wenzhou real estate speculators who are hated by the whole country are the representatives! ";
descriptions[1][2] = "My understanding of Jiaxing is still at the historic conference held on Jiaxing South Lake";
descriptions[2] = new Array();
descriptions[2][0] = "Guangzhou is the capital of Guangdong Province, with a developed economy, but rampant crime! ";
descriptions[2][1] = "Shenzhen is the first special economic zone in the country. It has a developed economy and is almost entirely populated by immigrants. Like Guangzhou, the public security is not good. ";
descriptions[2][2] = "Zhuhai is one of the first coastal open cities in my country. It is a beautiful city, a typical coastal city, and suitable for living. ";

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"); //Since Chrome's check for cross-domain access cannot be displayed locally, it will be displayed correctly when uploaded 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);
}







< ;/frameset>

5. Postscript :
1) Flexibility: function init(province, city) When the page is onloaded, you can specify the city to be initially displayed. Bidding ranking.
2) Scalability: Support for more cities can be added by adding data sources in the array. Data sources can be dynamic data sources through xml files or ajax, and can be implemented using dom operations.
3) Cross-domain problem: Since Chrome performs cross-domain inspection on the frame, the page cannot be displayed without setting it locally. However, I can upload it to the server, no problem.