一分钟让您彻底领悟联动下拉列表的核心思路

这篇文章献给在10分钟之内不能写出最简单的联动下拉列表以及想了解写法的人

相信80%的web程序员都使用过联动菜单，这其中又有至少50%的人使用过或只使用过省份、城市联动下拉列表，但是，这其中会有一部分人只是拿来主意，并不会自己写，而且望着网上繁杂庞大、各式各样的联动下拉代码产生了学习恐惧感，今天我用简化问题的策略来告诉大家，这样的代码其实很简单。

所有的联动菜单归根到底都是对select元素的操作，什么操作呢？就是重置操作！通常这会传入一个新的数组，比如["a,","b","c"]，然后给这个select元素遍历该数组添加option。

思路是：

1、清空select中的所有option

2、遍历数组，为每个数组元素生成一个option，然后添加到select中去

现在我们来看看重置select的代码是多么简单：

function resetSelectByArray(selectObjID,arrObj,arrObjValue)
{
    var selectObj=document.getElementById(selectObjID);//获取当前要重置的select元素
    selectObj.length=0;//清空该select的所有option
    var arrLen=arrObj.length;
    for(var i=0;i<arrLen;i++)//遍历数组，为select逐个添加option
    {
        var optText=arrObj[i];//获取option的text
        var optValue=(arrObjValue!=null?arrObjValue[i]:i);//获取option的value，如果arrObjValue不存在，则使用当前的index座位value
        var optItem = new Option(optText,optValue);//创建一个option
        selectObj.options.add(optItem);//添加该option
    }
}

代码的解释我就不多说了，注释还算比较清楚吧。