<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select onchange="f(this)"> <option value="0">江西</option> <option value="1">湖南</option> <option value="2">广东</option> </select> <select id="selectCity"> <option value="0">南昌</option> <option value="1">赣州</option> <option value="2">吉安</option> </select> </body> <script> var citys = [["南昌", "赣州", "吉安"], ["长沙", "株洲", "潭州"], ["深圳", "广州", "惠州", "佛山"]]; var arr = null; var selectOption = document.getElementById("selectCity"); var text = null; var optionElement = null; function f(obj) { selectOption.innerHTML = ""; //将上一次的城市清空,(option选项也清除了) arr = citys[obj.value]; for (var i = 0; i < arr.length; i++) { text = document.createTextNode(arr[i]); //将数组元素(城市)添加到text文档,变成文本对象,节点 optionElement = document.createElement("option"); //创建新的option标签,选项(元素对象),之前的option标签已经没了或者是本省的城市内容不能覆盖 optionElement.appendChild(text); //将城市添加到option标签 selectOption.appendChild(optionElement); //添加到选项 } } </script> </html>
附加一个电子时钟hh
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <span id="myspan">电子时钟</span> </body> <script> var mydate=null; var elementById = document.getElementById("myspan"); setInterval(function () { myDate = new Date(); elementById.innerHTML=myDate.toLocaleString() },1000); </script> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步