省市区三级联动怎么写

做页面开发或客户端程序开发，都会碰到几个下拉菜单联动的情况。比如常见的省，市，区三级联动。

这种下拉菜单该怎样联动？下面一起来看下，以页面开发为例子。

方法/步骤

1. 先看下我们的HTML代码，很简单，就是三个空的select下拉框控件。

   

2. 然后，我们用JS定义三个数组，分别是省数据，市数据，和区数据。代码如图，用到Jquery来操作dom对象，所以需要引入Jquery脚本。

   

   

3. 这个数据可以是后台从数据库读出来的数据，也可以是在JS里直接写的数据。但无论是哪种形式，三个数组的数据都是有关联的。

   arr_c，市数组，里面每一项内容都有一个属性‘p_id’，表示这个市是属于哪个省的，即p_id对应的是省数组里的id。

   同样arr_a，区数组，里面的c_id是对应市数组里的id，表示这个区是属于哪个市的。

   

   

4. 接着添加一个方法general_select_p，该方法循环arr_p数组（省数据），为第一个下拉框添加选项。

   

5. 然后添加方法general_select_c，该方法和general_select_p类似，循环为第二个下拉框添加选项，主要的区别就是只添加某个省的市数据，添加哪个省的市数据，取决于第一个下拉框选的是哪个省，就是通过参数传过来的省id。代码如图。

   

6. 最后添加的方法是general_select_a，和general_select_c方法一样，生成区下拉框，用哪个市的区取决于第二个下拉框选的数据。代码如图

   

7. 接着添加JS代码，在页面加载完成后，我们用JS代码为第一个下拉框，添加数据，即把省数据加到第一个下拉框里，做下拉框的选项，主要是调用general_select_p方法，脚本代码如图

   

8. 然后为第一个下拉框添加change事件，就是当第一个下拉框选择不同的省时，需要用该省下的市数据填充到第二个下拉框里。

   同理要为第二个下拉框添加change事件，当第二个下拉框选择不同的市时，需要用该市下的区数据填充到第三个下拉框里。

   代码如图。

   

9. 刷新页面，得到三个联动的下拉框，效果如图。