ajax二级联动

急需自创源码----用ajax做一个select的二级联动,基于ssh1，用mysql数据库，mysql数据库中有这样2张表：
表1（Directory)的数据：
-------------------------
id      name
---------------------------
1       java
2       c
3       c++
4       c#表2（Company)的数据：
---------------------------------------
id      directory     company_name
----------------------------------------
1       java          北京银行
2       java          上海信息有限公司
3       c             杭州电子技术公司
4       c++           南京东软
5       c             北京文思创新jsp页面有两个下拉列表select1和select2;
select1内容取自表1的name，select2内容根据select1 的取值来查找name=directory的company_name例如：select1若选择java，则select2中列出directory为java的公司（北京银行
和上海信息有限公司）
=====================================================
急需，求自创源码，发我邮箱：[email protected]
=====================================================ajaxjspselectssh1mysql

解决方案 »

  1.   

    这个不需要ajax，加个属性标签就行了
    <html>
        <head>
    <meta charset="UTF-8">
            <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type=text/javascript>
    function select1Changed(){
    var v = $('#select1').val();
    $('#select2 option').hide();
    $('#select2 option[data-directory="'+v+'"]').show();
    $('#select2').val('');
    }
    $(function(){
    select1Changed();
    });
    </script>
        </head>
        <body>
            <form>
                <select id="select1" onchange="select1Changed()">
                    <option value="java">java</option>
                    <option value="c">c</option>
                    <option value="c++">c++</option>
                    <option value="c#">c#</option>
                </select>
                <select id="select2">
                    <option value="北京银行" data-directory="java">北京银行</option>
                    <option value="上海信息有限公司" data-directory="java">上海信息有限公司</option>
                    <option value="杭州电子技术公司" data-directory="c">杭州电子技术公司</option>
                    <option value="南京东软" data-directory="c++">南京东软</option>
                    <option value="北京文思创新" data-directory="c">北京文思创新</option>
                </select>
            </form>
        </body>
    </html>
      

  2.   

    Jsp
    <%-- index.jsp --%>
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="/struts-tags" prefix="s" %>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    function updateCompany(obj) {
    var did = $(obj).val();
    $.post("findById",
    {"dir.id":did},
    function(returnData) {
    alert(returnData)
    $("#CompanyContent").html(returnData);
    });
    }
    </script>
      </head>
      
      <body>
       <s:if test="directorys == null">
    <script type="text/javascript">
    location.href="findAll";
    </script>
       </s:if>
    Directory：<select name="directory.id" id="directory"  class="border_solid" onchange="updateCompany(this)">
    <option value="">不限</option>
    <s:iterator value="directorys">
    <option value="<s:property value="id"/>"><s:property value="name"/></option>
    </s:iterator>
       </select>&nbsp;&nbsp;
    <span id="CompanyContent">
    Company：<select name="company" id="company"  class="border_solid">
       <option value="">不限</option>
         </select>
    </span>
      </body>
    </html>
    <%-- companys.jsp--%>
    Company：<select name="company" id="company"  class="border_solid">
       <option value="">不限</option>
       <s:iterator value="dir.companies">
         <option value="<s:property value="id"/>"><s:property value="name"/></option>
       </s:iterator>
         </select>
    //struts.xml 
    <action name="findAll" class="directoryActioon" method="list">
                <result>index.jsp</result>
            </action>
            
            <action name="findById" class="directoryActioon" method="findById">
                <result>companys.jsp</result>
            </action>
    //java action
    private DirectoryService directoryService;
    private List<Directory> directorys;
    private Directory dir;

    public String list() {
    directorys = directoryService.findAllDirectory();
    return SUCCESS;
    }

    public String findById() {
    dir = directoryService.findDirectoryById(dir.getId());
    return SUCCESS;
    } public List<Directory> getDirectorys() {
    return directorys;
    }
    //省略gettersetter
      

  3.   


    忘了做一些js判断
    <script type="text/javascript">
    function updateCompany(obj) {

    var did = $(obj).val();
    alert(did)
    if (did == "") {
    document.getElementById("company").length = 1;
    return false;
    }
    $.post("findById",
    {"dir.id":did},
    function(returnData) {
    $("#CompanyContent").html(returnData);
    });
    }
    </script>
      

  4.   

    我做多可以给你个思路但是没有代码。你把一级的用标签全部显示出来然后加上onchange事件这个事件就是调用你ajax访问后台，然后得到json字符串数组解析然后追加到你要显示的地方就可以了。
      

  5.   

    1楼的select2没有根据select1的值变化，都是显示全部信息。还有在jsp页面有叹号，提示：Undefined attribute name(data-directory)
      

  6.   

    2楼大哥 ，您这用的是struts2啊，我这需要在struts1下运行呐
      

  7.   


    早不说是struts1，代码也差不多，你稍做修改就差不多了
      

  8.   

    你是copy我上面发的代码出这个错？
      

  9.   

    请参考我的基于spring,security的开源项目
    http://blog.csdn.net/shadowsick