热门:网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置:.Net中文社区>> AJAX编程>>正文内容

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

发布时间:2009年08月16日点击数: 未知

最近的一个项目中用到了下拉框联动显示数据的功能,索性利用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

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

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

本站热点业务

更多模板/案例展示

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作