<title>一个基于JS的5级联动Select下拉选择框</title>
<SCRIPT LANGUAGE=
"JavaScript"
>
<!-- Begin
var
state =
new
Array(50);
var
capital =
new
Array(50);
var
date
=
new
Array(50);
var
flower =
new
Array(50);
var
bird =
new
Array(50);
state[0] =
"Alabama"
;
capital[0] =
"Montgomery"
;
date
[0] =
"December 14, 1819"
;
flower[0] =
"Camellia"
;
bird[0] =
"Yellowhammer"
;
state[1] =
"Alaska"
;
capital[1] =
"Juneau"
;
date
[1] =
"January 3, 1959"
;
flower[1] =
"Forget-me-not"
;
bird[1] =
"Willow Ptarmigan"
;
state[2] =
"Arizona"
;
capital[2] =
"Phoenix"
;
date
[2] =
"February 14, 1912"
;
flower[2] =
"Suguaro Cactus Blossom"
;
bird[2] =
"Cactus Wren"
;
state[3] =
"Arkansas"
;
capital[3] =
"Little Rock"
;
date
[3] =
"June 15, 1836"
;
flower[3] =
"Apple Blossom"
;
bird[3] =
"Mockingbird"
;
state[4] =
"California"
;
capital[4] =
"Sacremento"
;
date
[4] =
"September 9, 1850"
;
flower[4] =
"Golden Poppy"
;
bird[4] =
"California Valley Quail"
;
state[5] =
"Colorado"
;
capital[5] =
"Denver"
;
date
[5] =
"August 1, 1876"
;
flower[5] =
"Mountain Columbine"
;
bird[5] =
"Lark Bunting"
;
state[6] =
"Connecticut"
;
capital[6] =
"Hartford"
;
date
[6] =
"January 9, 1788"
;
flower[6] =
"Mountain Laurel"
;
bird[6] =
"Robin"
;
state[7] =
"Florida"
;
capital[7] =
"Tallahassee"
;
date
[7] =
"March 3, 1845"
;
flower[7] =
"Orange Blossom"
;
bird[7] =
"Mockingbird"
;
state[8] =
"Georgia"
;
capital[8] =
"Atlanta"
;
date
[8] =
"January 2, 1788"
;
flower[8] =
"Cherokee Rose"
;
bird[8] =
"Brown Thrasher"
;
state[9] =
"Hawaii"
;
capital[9] =
"Honolulu"
;
date
[9] =
"August 21, 1959"
;
flower[9] =
"Red Hibiscus"
;
bird[9] =
"Nene (Hawaiian Goose)"
;
state[10] =
"Idaho"
;
capital[10] =
"Boise"
;
date
[10] =
"July 3, 1890"
;
flower[10] =
"Syringa"
;
bird[10] =
"Mountain Bluebird"
;
state[11] =
"Illinois"
;
capital[11] =
"Springfield"
;
date
[11] =
"December 3, 1818"
;
flower[11] =
"Violet"
;
bird[11] =
"Cardinal"
;
state[12] =
"Indiana"
;
capital[12] =
"Indianapolis"
;
date
[12] =
"December 11, 1816"
;
flower[12] =
"Peony"
;
bird[12] =
"Cardinal"
;
state[13] =
"Iowa"
;
capital[13] =
"Des Moines"
;
date
[13] =
"December 28, 1846"
;
flower[13] =
"Wild Rose"
;
bird[13] =
"Eastern Goldfinch"
;
state[14] =
"Kansas"
;
capital[14] =
"Topeka"
;
date
[14] =
"January 29, 1861"
;
flower[14] =
"Sunflower"
;
bird[14] =
"Western Meadowlark"
;
state[15] =
"Kentucky"
;
capital[15] =
"Frankfort"
;
date
[15] =
"June 1, 1792"
;
flower[15] =
"Goldenrod"
;
bird[15] =
"Cardinal"
;
state[16] =
"Louisiana"
;
capital[16] =
"Baton Rouge"
;
date
[16] =
"April 30, 1812"
;
flower[16] =
"Magnolia"
;
bird[16] =
"Eastern Brown Pelican"
;
state[17] =
"Maine"
;
capital[17] =
"Augusta"
;
date
[17] =
"March 15, 1820"
;
flower[17] =
"Pine Cone & Tassel"
;
bird[17] =
"Chickadee"
;
state[18] =
"Tennessee"
;
capital[18] =
"Nashville"
;
date
[18] =
"June 1, 1796"
;
flower[18] =
"Iris"
;
bird[18] =
"Mockingbird"
;
state[19] =
"Maryland"
;
capital[19] =
"Annapolis"
;
date
[19] =
"April 28, 1788"
;
flower[19] =
"Black-eyed Susan"
;
bird[19] =
"Baltimore Oriole"
;
state[20] =
"Delaware"
;
capital[20] =
"Dover"
;
date
[20] =
"December 7, 1787"
;
flower[20] =
"Peach Blossom"
;
bird[20] =
"Blue Hen Chicken"
;
state[21] =
"Massachusetts"
;
capital[21] =
"Boston"
;
date
[21] =
"February 6, 1788"
;
flower[21] =
"Mayflower"
;
bird[21] =
"Chickadee"
;
state[22] =
"Rhode Island"
;
capital[22] =
"Providence"
;
date
[22] =
"May 29, 1790"
;
flower[22] =
"Violet"
;
bird[22] =
"Rhode Island Red"
;
state[23] =
"Minnesota"
;
capital[23] =
"St. Paul"
;
date
[23] =
"May 11, 1858"
;
flower[23] =
"Lady-slipper"
;
bird[23] =
"Loon"
;
state[24] =
"Mississippi"
;
capital[24] =
"Jackson"
;
date
[24] =
"December 10, 1817"
;
flower[24] =
"Magnolia"
;
bird[24] =
"Mockingbird"
;
state[25] =
"Missouri"
;
capital[25] =
"Jefferson City"
;
date
[25] =
"August 10, 1821"
;
flower[25] =
"Hawthorn"
;
bird[25] =
"Bluebird"
;
state[26] =
"Michigan"
;
capital[26] =
"Lansing"
;
date
[26] =
"January 26, 1837"
;
flower[26] =
"Apple Blossom"
;
bird[26] =
"Robin"
;
state[27] =
"Montana"
;
capital[27] =
"Helena"
;
date
[27] =
"November 8, 1889"
;
flower[27] =
"Bitterroot"
;
bird[27] =
"Western Meadowlark"
;
state[28] =
"Nebraska"
;
capital[28] =
"Lincoln"
;
date
[28] =
"March 1, 1867"
;
flower[28] =
"Goldenrod"
;
bird[28] =
"Western Meadowlark"
;
state[29] =
"Nevada"
;
capital[29] =
"Carson City"
;
date
[29] =
"October 31, 1864"
;
flower[29] =
"Sagebrush"
;
bird[29] =
"Mountain Bluebird"
;
state[30] =
"New Hampshire"
;
capital[30] =
"Concord"
;
date
[30] =
"June 21, 1788"
;
flower[30] =
"Purple Lilac"
;
bird[30] =
"Purple Finch"
;
state[31] =
"Vermont"
;
capital[31] =
"Montpelier"
;
date
[31] =
"March 4, 1791"
;
flower[31] =
"Red Clover"
;
bird[31] =
"Hermit Thrush"
;
state[32] =
"New Jersey"
;
capital[32] =
"Trenton"
;
date
[32] =
"December 18, 1787"
;
flower[32] =
"Violet"
;
bird[32] =
"Eastern Goldfinch"
;
state[33] =
"New Mexico"
;
capital[33] =
"Santa Fe"
;
date
[33] =
"January 6, 1912"
;
flower[33] =
"Yucca"
;
bird[33] =
"Road Runner"
;
state[34] =
"New York"
;
capital[34] =
"Albany"
;
date
[34] =
"July 26, 1788"
;
flower[34] =
"Rose"
;
bird[34] =
"Bluebird"
;
state[35] =
"North Carolina"
;
capital[35] =
"Raleigh"
;
date
[35] =
"November 21, 1789"
;
flower[35] =
"Flowering Dogwood"
;
bird[35] =
"Cardinal"
;
state[36] =
"Wyoming"
;
capital[36] =
"Cheyenne"
;
date
[36] =
"July 10, 1890"
;
flower[36] =
"Indian Paintbrush"
;
bird[36] =
"Meadowlark"
;
state[37] =
"North Dakota"
;
capital[37] =
"Bismarck"
;
date
[37] =
"November 2, 1889"
;
flower[37] =
"Prairie Rose"
;
bird[37] =
"Meadowlark"
;
state[38] =
"Ohio"
;
capital[38] =
"Columbus"
;
date
[38] =
"March 1, 1803"
;
flower[38] =
"Scarlet Carnation"
;
bird[38] =
"Cardinal"
;
state[39] =
"Oklahoma"
;
capital[39] =
"Oklahoma City"
;
date
[39] =
"November 16, 1907"
;
flower[39] =
"Mistletoe"
;
bird[39] =
"Scissor-tailed Flycatcher"
;
state[40] =
"Oregon"
;
capital[40] =
"Salem"
;
date
[40] =
"February 14, 1859"
;
flower[40] =
"Oregon Grape"
;
bird[40] =
"Western Meadowlark"
state[41] =
"Pennsylvania"
;
capital[41] =
"Harrisburg"
;
date
[41] =
"December 12, 1787"
;
flower[41] =
"Mountain Laurel"
;
bird[41] =
"Ruffed Grouse"
;
state[42] =
"South Carolina"
;
capital[42] =
"Columbia"
;
date
[42] =
"May 23, 1788"
;
flower[42] =
"Yellow Jessamine"
;
bird[42] =
"Carolina Wren"
;
state[43] =
"South Dakota"
;
capital[43] =
"Pierre"
;
date
[43] =
"November 2, 1889"
;
flower[43] =
"Pasqueflower"
;
bird[43] =
"Ring-necked Pheasant"
;
state[44] =
"Texas"
;
capital[44] =
"Austin"
;
date
[44] =
"December 29, 1845"
;
flower[44] =
"Bluebonnet"
;
bird[44] =
"Mockingbird"
;
state[45] =
"Utah"
;
capital[45] =
"Salt Lake City"
;
date
[45] =
"January 4, 1896"
;
flower[45] =
"Sego Lily"
;
bird[45] =
"Sea Gull"
;
state[46] =
"Virginia"
;
capital[46] =
"Richmond"
;
date
[46] =
"June 26, 1788"
;
flower[46] =
"Dogwood"
;
bird[46] =
"Cardinal"
;
state[47] =
"Washington"
;
capital[47] =
"Olympia"
;
date
[47] =
"November 11, 1889"
;
flower[47] =
"Coast Rhododendron"
;
bird[47] =
"Willow Goldfinch"
;
state[48] =
"West Virginia"
;
capital[48] =
"Charleston"
;
date
[48] =
"June 20, 1863"
;
flower[48] =
"Rhododendron"
;
bird[48] =
"Cardinal"
;
state[49] =
"Wisconsin"
;
capital[49] =
"Madison"
;
date
[49] =
"May 29, 1848"
;
flower[49] =
"Wood Violet"
;
bird[49] =
"Robin"
;
function
showInfo() {
var
page = document.triviaform;
var
choice = page.statesList;
for
(
var
i = 0; i <= state.length; i++) {
if
(choice.options[choice.selectedIndex].value == state[i]) {
page.capital.value = capital[i];
page.
date
.value =
date
[i];
page.flower.value = flower[i];
page.bird.value = bird[i];
break
;
}
else
{
page.capital.value =
""
;
page.
date
.value =
""
;
page.flower.value =
""
;
page.bird.value =
""
;
}
}
}
</script>
<form name=triviaform>
<table border=1>
<tr><td align=center>
<p><font size=6><em><strong><u><font size=
"2"
>这个实例只是提供给你一种思路而已</font></u></strong></em></font>
<p>(故未做汉化)<br>
<font size=3></font>
<p>Select a state: <select name=statesList size=1 onChange=
"showInfo()"
>
<option value=
""
>Select ---->
<option value=
"Alabama"
>Alabama
<option value=
"Alaska"
>Alaska
<option value=
"Arizona"
>Arizona
<option value=
"Arkansas"
>Arkansas
<option value=
"California"
>California
<option value=
"Colorado"
>Colorado
<option value=
"Connecticut"
>Connecticut
<option value=
"Delaware"
>Delaware
<option value=
"Florida"
>Florida
<option value=
"Georgia"
>Georgia
<option value=
"Hawaii"
>Hawaii
<option value=
"Idaho"
>Idaho
<option value=
"Illinois"
>Illinois
<option value=
"Indiana"
>Indiana
<option value=
"Iowa"
>Iowa
<option value=
"Kansas"
>Kansas
<option value=
"Kentucky"
>Kentucky
<option value=
"Louisiana"
>Louisiana
<option value=
"Maine"
>Maine
<option value=
"Maryland"
>Maryland
<option value=
"Massachusetts"
>Massachusetts
<option value=
"Michigan"
>Michigan
<option value=
"Minnesota"
>Minnesota
<option value=
"Mississippi"
>Mississippi
<option value=
"Missouri"
>Missouri
<option value=
"Montana"
>Montana
<option value=
"Nebraska"
>Nebraska
<option value=
"Nevada"
>Nevada
<option value=
"New Hampshire"
>New Hampshire
<option value=
"New Jersey"
>New Jersey
<option value=
"New Mexico"
>New Mexico
<option value=
"New York"
>New York
<option value=
"North Carolina"
>North Carolina
<option value=
"North Dakota"
>North Dakota
<option value=
"Ohio"
>Ohio
<option value=
"Oklahoma"
>Oklahoma
<option value=
"Oregon"
>Oregon
<option value=
"Pennsylvania"
>Pennsylvania
<option value=
"Rhode Island"
>Rhode Island
<option value=
"South Carolina"
>South Carolina
<option value=
"South Dakota"
>South Dakota
<option value=
"Tennessee"
>Tennessee
<option value=
"Texas"
>Texas
<option value=
"Utah"
>Utah
<option value=
"Vermont"
>Vermont
<option value=
"Virginia"
>Virginia
<option value=
"Washington"
>Washington
<option value=
"West Virginia"
>West Virginia
<option value=
"Wisconsin"
>Wisconsin
<option value=
"Wyoming"
>Wyoming
</select>
<p>Capital: <input type=text size=25 name=capital>
<p>Admitted On: <input type=text size=20 name=
date
>
<p>State Flower: <input type=text size=20 name=flower>
<p>State Bird: <input type=text size=23 name=bird>
</td></tr>
</table>
</form>