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


Posted in Javascript onAugust 17, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
Nginx上传文件全部缓存解决方案
Aug 17 #Javascript
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Python 中@property的用法详解
2020/01/15 Python
opencv+python实现均值滤波
2020/02/19 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
如何查找网页漏洞
2016/06/22 面试题
党员个人对照检查材料
2014/10/01 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2016年学校招生广告语
2016/01/28 职场文书