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 相关文章推荐
jQuery判断对象是否存在的方法
Feb 05 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
原生js实现吸顶效果
Mar 13 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 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
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
JSQL  一个 web DB 的封装
2010/05/05 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
实例解析Array和String方法
2016/12/14 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Python的print用法示例
2014/02/11 Python
Unicode和Python的中文处理
2017/03/19 Python
简单实现python画圆功能
2018/01/25 Python
Python如何计算语句执行时间
2019/11/22 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python import 上级目录的导入
2020/11/03 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
家长学校培训材料
2014/08/20 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
个人先进事迹材料
2014/12/29 职场文书
员工评语范文
2014/12/31 职场文书
教师个人年终总结
2015/02/11 职场文书
阿凡达观后感
2015/06/10 职场文书
法制教育观后感
2015/06/17 职场文书