JS实现的5级联动Select下拉选择框实例

前端技术 2023/09/07 JavaScript

本文实例讲述了JS实现的5级联动Select下拉选择框。分享给大家供大家参考。具体如下:

这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢。

运行效果截图如下:

在线演示地址如下:

http://demo.phpstudy.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程序设计有所帮助。

本文地址:https://www.stayed.cn/item/18388

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。