<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>账号注册</title> <style> select { width: 100px; padding: 5px; font-size:16px; } </style> </head> <body> <!-- 要实现的功能: 账号 密码 性别 <爱好> 地址 出生年月 头像 相册 邮箱 电话 肤色 音量 个人简介 --> <form action="demo01.html"method="post"> <!--账号开始--> <p> 账号: <input type="text"name="userCode"required placeholder="请输入账号:"> </p> <!--账号结束--> <!--密码开始--> <p> 密码: <input type="password"name="userPassword"required placeholder="请输入密码:"> </p> <!--密码结束--> <!--性别开始--> <!--默认是男--> <p> 性别: <input type="radio"name="gender"checked value="1">男 <input type="radio"name="gender"value="0">女 </p> <!--性别结束--> <!--爱好开始--> <p> 爱好: <input type="checkbox"name="hobby"checked value="篮球">篮球 <input type="checkbox"name="hobby"value="乒乓球">乒乓球 <input type="checkbox"name="hobby"checked value="rap">rap <input type="checkbox"name="hobby"value="跳舞">跳舞 </p> <!--爱好结束--> <!--地址开始--> <!--使用select下拉列表--> <p><!--省份--> 地址: <select id="prov"></select> <select id="city"></select> <script> //定义省市的信息 var provList = ['江苏','浙江','福建','湖南']; var cityList = []; cityList[0] = ['南京', '苏州', '宿迁', '扬州']; cityList[1] = ['杭州', '温州', '宁波', '台州']; cityList[2] = ['福州', '厦门', '泉州', '漳州']; cityList[3] = ['长沙', '湘潭', '株洲', '湘西']; //获取select元素 var provSelect = document.querySelector('#prov'); var citySelect = document.querySelector('#city'); //把省的信息 添加到第一个select元素中 provList.forEach(function(val, index){ //DOM操作 了解 provSelect.add(new Option(val, index)) }); //给第一个select绑定change事件 provSelect.onchange = function(){ //获取 当前的选项 var index = this.value; //清空第二个select原先内容 citySelect.length = 0; //选择对应的城市列表,添加到第二个select cityList[index].forEach(function(val, index){ citySelect.add(new Option(val, index)); }) } //手工触发一次 change事件 provSelect.onchange(); </script> </p> <!--地址结束--> <!--出生年月开始--> <p> 出生年月: <input type="date"name="birthDay"> </p> <!--出生年月结束--> <!--头像开始--> <p> 头像: <input type="file"name="headphoto"> </p> <!--头像结束--> <!--相册开始--> <p> 相册: <input type="file"name="photo"> </p> <!--相册结束--> <!--邮箱开始--> <p> 邮箱: <input type="email"name="email"> </p> <!--邮箱结束--> <!--电话开始--> <p> 电话: <input type="tel"name="phone"> </p> <!--电话结束--> <!-- 肤色开始--> <p> 肤色: <input type="color"name="color"> </p> <!-- 肤色结束--> <!--音量开始--> <p> 音量: <input type="range"name="volume"> </p> <!--音量结束--> <!--注册.取消,重置三个按钮--> <p> <input type="submit"value="注册:"> <input type="reset"value="重置"> <a href="../0906/demo08.html"> <input type="button"value="取消"οnclick="javaScript:alert('取消成功!')"> </a> </p> </form> </body> </html>