Ajax实现简单的下拉框联动显示数据

好久没弄Ajax了，最近的一个项目中用到了下拉框联动显示数据的功能，索性利用Ajax来实现。实现的方法有很多，网上也有很多其他的方法，web开发中会经常用到，记录下来，分享给新手。

页面中的两个下拉列表框：

<tr>

                <td style="width: 130px">

                    所在学院：</td>

                <td style="width: 100px">

                    <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)">

                        <option value="0">

                            --请选择所在学院学院--

                       </option>

                    </select></td>

            </tr>

            <tr>

                <td style="width: 130px">

                    所在专业：</td>

                <td style="width: 100px">

                    <select id="specialty" style="width: 200px" runat="server" onchange="SaveSpecical(this.value)">

                        <option value="0">

                            --请选择所在专业--

                       </option>

                    </select></td>

            </tr>

JS脚本代码：

Code

 

我们将http请求发送给服务端的Handler.ashx进行处理。

 

Code

根据学院的编号获得相应的专业，并将专业的名称用“|”分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。

 

这里只是二级的联动显示，三级联动数据的现实原理是一样的。