Javascript 实现无刷新联动菜单（select）的方法

<script language="JavaScript" type="text/javascript">
    var cityArr = [];
    var xianArr = [];
    xianArr['徐州'] = [
    {txt:'沛县',val:'沛县'},
    {txt:'铜山',val:'铜山'}
    ];
    cityArr['江苏'] = [
   
    {txt:'南京', val:'南京'},
   
    {txt:'无锡', val:'无锡'},
   
    {txt:'徐州', val:'徐州'},
   
    {txt:'苏州', val:'苏州'},
   
    {txt:'南通', val:'南通'},
   
    {txt:'淮阴', val:'淮阴'},
   
    {txt:'扬州', val:'扬州'},
   
    {txt:'镇江', val:'镇江'},
   
    {txt:'常州', val:'常州'}
   
    ];
   
    cityArr['浙江'] = [
   
    {txt:'杭州', val:'杭州'},
   
    {txt:'宁波', val:'宁波'},
   
    {txt:'温州', val:'温州'},
   
    {txt:'湖州', val:'湖州'}
   
    ];
    function setCity(province){
        setSelectOption('city', cityArr[province], '-请选择-');
    }
    function setXian(city){
        setSelectOption('xian',xianArr[city],'-请选择-');
    }
</script>



<script language="JavaScript" type="text/javascript">

<!--

/*

* 说明：将指定下拉列表的选项值清空

* 作者：CodeBit.cn ( http://www.CodeBit.cn )

*

* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须

*/

function removeOptions(selectObj){
    if (typeof selectObj != 'object'){
        selectObj = document.getElementById(selectObj);
    }
    // 原有选项计数
    var len = selectObj.options.length;
    for (var i=0; i < len; i++){
        // 移除当前选项
        selectObj.options[0] = null;
    }
}

/*

* 说明：设置传入的选项值到指定的下拉列表中

* 作者：CodeBit.cn ( http://www.CodeBit.cn )

*

* @param {String || Object]} selectObj 目标下拉选框的名称或对象，必须

* @param {Array} optionList 选项值设置 格式：[{txt:'北京', val:'010'}, {txt:'上海', val:'020'}] ，必须

* @param {String} firstOption 第一个选项值，如：“请选择”，可选，值为空

* @param {String} selected 默认选中值，可选

*/

function setSelectOption(selectObj, optionList, firstOption, selected){

    if (typeof selectObj != 'object'){
        selectObj = document.getElementById(selectObj);
    }

    // 清空选项
    removeOptions(selectObj);
   
    // 选项计数
    var start = 0;
   
    // 如果需要添加第一个选项
    if (firstOption){
        selectObj.options[0] = new Option(firstOption, '');
       
    // 选项计数从 1 开始
    start ++;
    }
   
   
    var len = optionList.length;
    for (var i=0; i < len; i++){
        // 设置 option
        selectObj.options[start] = new Option(optionList[i].txt, optionList[i].val);
        // 选中项
        if(selected == optionList[i].val){
            selectObj.options[start].selected = true;
        }
        // 计数加 1
        start ++;
    }
}
//-->
</script>

<select name="province" id="province"
    onchange="if(this.value != '') setCity(this.options[this.selectedIndex].value);">

    <option value="">-请选择-</option>

    <option value="江苏">江苏</option>

    <option value="浙江">浙江</option>

</select>
省



<select name="city" id="city" onchange="if(this.value != '') setXian(this.options[this.selectedIndex].value);">

    <option value="">-请选择-</option>

</select>
市

<select name="xian" id="xian">

    <option value="">-请选择-</option>

</select>
县