JavaScript地址选择器

这里使用的是 document.createElement() 创建节点，再追加到父节点

使用InnerHTML亦可，复杂一点可以用 text/html 代码模版，或者其它框架的模版功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>
<body>

<select id="provin" onchange="showCity(this)">
    <option value ="福建">福建</option>
    <option value ="海南">海南</option>
    <option value ="北京">北京</option>
    <option value ="俄罗斯">俄罗斯</option>
</select>

<select id="city">
</select>

<script>
    function appender(pro){
        var para1=document.createElement("option");
        para1.appendChild(document.createTextNode(pro+" : city1"));

        var para2=document.createElement("option");
        para2.appendChild(document.createTextNode(pro+" : city2"));

        var para3=document.createElement("option");
        para3.appendChild(document.createTextNode(pro+" : city3"));

        var para4=document.createElement("option");
        para4.appendChild(document.createTextNode(pro+" : city4"));

        var element=document.getElementById("city");

        while(element.hasChildNodes()){
            element.removeChild(element.firstChild);
        }

        element.appendChild(para1);
        element.appendChild(para2);
        element.appendChild(para3);
        element.appendChild(para4);
    }

    function showCity(view){
        appender(view.value);
    }
</script>
</body>
</html>