5段階連携例 JS_javascriptスキルによる選択ドロップダウン選択ボックス

この記事の例では、JS によって実装された 5 レベルのリンク選択ドロップダウン選択ボックスについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは JS をベースにした 5 レベルのリンク選択ドロップダウン選択ボックスです。ここで示しているものは単なる例であり、外国人の Web サイトからダウンロードするのに時間がかかりました。もちろん、日常的にこれを行う必要はないかもしれません。マルチレベルでは、書き方とアイデアを紹介することを目的としています。皆さんに気に入っていただければ幸いです。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンライン デモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-select-5-option-codes/

具体的なコードは次のとおりです:

<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 = "";
  }
 }
}
// End -->
</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>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。