| 效果如下图所示：
图1 三级联动 二、设计江苏福彩投注站彩票投注助手 编程实现江苏福彩投注站彩票投注助手，页面布局效果如图2所示。
图2福彩投注站彩票助手页面 功能要求如下： 单击“机选1注”、“机选5注”或“机选10注”按钮时，能够随机产生相应条数的数据。 如图3所示。
图3 单击“机选10注”时页面 单击“删除”按钮，删除选中的那一条数据。若未选择，则弹出提示。
图4 未选择选项单击删除按钮时页面 单击“全部删除”按钮，清空所有机选数据。
|
| 1. 三级联动 <script type="text/javascript"> var country = [ ["中国", "日本", "韩国"], ["英国", "德国", "法国"], ["美国", "巴西", "阿根廷"] ]; var city = [ [["北京", "上海", "广州"], ["东京", "大阪", "名古屋"], ["首尔", "仁川", "济州"]], [["伦敦", "曼彻斯特", "利物浦"], ["柏林", "慕尼黑", "法兰克福"], ["巴黎", "里尔", "摩纳哥"]], [["华盛顿", "纽约", "洛杉矶"], ["里约热内卢", "圣保罗", "巴西利亚"], ["布宜诺斯艾利斯", "萨尔多瓦", "罗萨里奥"]] ]; var selContinent = document.forms[0].continent; var selCountry = document.forms[0].country; var selCity = document.forms[0].city; function sel_country() { selCountry.length = 1; selCity.length = 1; var arrCountry = country[selContinent.selectedIndex - 1]; for (var i = 0; i < arrCountry.length; i++) { selCountry[i + 1] = new Option(arrCountry[i], selContinent.selectedIndex); } } function sel_city() {
var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];
for (var i = 0; i < arrCountryCity.length; i++) { selCity[i + 1] = new Option(arrCountryCity[i], selCountry.selectedIndex); } } </script> 主要利用了JavaScript 变量数组，funtion函数与onchange函数完成了该功能。
<script type="text/javascript"> function $(id){return document.getElementById(id);} function selectNumber(n){ var objSelect=$("number8"); var s=null; objSelect.focus(); for(var i=0;i<n;i++){ for(var j=0;j<8;j++){ s=s+Math.floor(Math.random() * 100 )+" "; } objSelect.options.add(new Option(s,)); s=null; } } 利用selectNumber函数完成了随机数与文本内容的功能。 <form method="post" action=""> <table align="center"> <caption><h2>福彩投注站投注彩票助手 </h2></caption> <tr> <td><input type="button" value="机选1注" onclick="selectNumber(1);" οnfοcus=”this.select()” οnfοcus=”this.select()” ></td> 在借助了table和表单的内容加button完成 |
| 1.
2.
|
<!doctype html> <html lang="en"> <head> <!-- 添加文档头部内容 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>JavaScript联动</title> </head> <style type="text/css"> body { text-align: center; } div#id-div-center { width: auto; height: auto; border: 0px solid black; margin: 32px auto; padding: 2px; } div#id-div-center form { width: 500px; margin-left: auto; margin-right: auto; } </style> <body> <!-- 添加文档主体内容 --> <header> <nav>三级联动下拉列表框</nav> </header> <hr> <!-- 添加文档主体内容 --> <div id="id-div-center"> <!-- 定义下拉列表框 --> <form name="form3sel"> 大洲: <select name="continent" onchange="sel_country()"> <option value="0">选择大洲...</option> <option value="亚洲">亚洲</option> <option value="欧洲">欧洲</option> <option value="美洲">美洲</option> </select> 国家: <select name="country" onchange="sel_city()"> <option value="0">选择国家...</option> </select> 城市: <select name="city"> <option value="0">选择城市...</option> </select> </form> </div> </body> <script type="text/javascript"> var country = [ ["中国", "日本", "韩国"], ["英国", "德国", "法国"], ["美国", "巴西", "阿根廷"] ]; var city = [ [["北京", "上海", "广州"], ["东京", "大阪", "名古屋"], ["首尔", "仁川", "济州"]], [["伦敦", "曼彻斯特", "利物浦"], ["柏林", "慕尼黑", "法兰克福"], ["巴黎", "里尔", "摩纳哥"]], [["华盛顿", "纽约", "洛杉矶"], ["里约热内卢", "圣保罗", "巴西利亚"], ["布宜诺斯艾利斯", "萨尔多瓦", "罗萨里奥"]] ]; var selContinent = document.forms[0].continent; var selCountry = document.forms[0].country; var selCity = document.forms[0].city; function sel_country() { selCountry.length = 1; selCity.length = 1; var arrCountry = country[selContinent.selectedIndex - 1]; for (var i = 0; i < arrCountry.length; i++) { selCountry[i + 1] = new Option(arrCountry[i], selContinent.selectedIndex); } } function sel_city() {
var arrCountryCity = city[selContinent.selectedIndex - 1][selCountry.selectedIndex - 1];
for (var i = 0; i < arrCountryCity.length; i++) { selCity[i + 1] = new Option(arrCountryCity[i], selCountry.selectedIndex); } } </script> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 福彩投注站投注彩票助手 </title> <style type="text/css">
div{background: url("fc_logo.jpg") right top no-repeat;width:550px; height:320px; margin:0 auto;border:2px solid #0077BB;color:white;}
h2{font-size:28px;text-align:center;padding:10px auto;}
select{width:300px;height:145px;}
input{width:80px;height:40px;} </style> <script type="text/javascript"> function $(id){return document.getElementById(id);} function selectNumber(n){ var objSelect=$("number8"); var s=null; objSelect.focus(); for(var i=0;i<n;i++){ for(var j=0;j<8;j++){ s=s+Math.floor(Math.random() * 100 )+" "; } objSelect.options.add(new Option(s,)); s=null; } }
function delSelect() { var objSelect=$("number8"); var index=objSelect.selectedIndex; if(index>=0){ objSelect.options.remove(index); }else{alert("请先选择列表项后再删除！");} } function delSelectAll() { var objSelect=$("number8"); var strIndex=objSelect.options.length; if (strIndex>0) { for (var i=0;i<=strIndex-1;i++ ) { objSelect.options.remove(0); } } else{alert("请先选择列表项后再删除！");} } </script> </head> <body> <div id="" class=""> <img src="ico_7l.gif" width="76" height="72" border="0" alt=""> <form method="post" action=""> <table align="center"> <caption><h2>福彩投注站投注彩票助手 </h2></caption> <tr> <td><input type="button" value="机选1注" onclick="selectNumber(1);" οnfοcus=”this.select()” οnfοcus=”this.select()” ></td> <td rowspan="3"> <select name="number7" id="number8" size="2" οnfοcus=”this.select()” οnmοuseοver=”this.focus()”></select> </td> <td><input type="button" value="删除" onclick="delSelect();"></td> </tr> <tr> <td><input type="button" value="机选5注" onclick="selectNumber(5);" ></td> <td> </td> </tr> <tr> <td><input type="button" value="机选10注" onclick="selectNumber(10);"></td> <td><input type="button" value="全部删除" onclick="delSelectAll();"></td> </tr> </table> </form> </div> </body> </html> |
