<!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>