联动省市下拉框

jsp页面

<body>
    <table>
        <Tr>
            <Td>
                省份：<s:select list="ar" listKey="PId" listValue="PName" name="xx" id="pid" theme="simple" onchange="lisheng(this);"></s:select>&nbsp;&nbsp;城市：
                    <select id="yy">
                        <option value="0">---请选择---</option>
                    </select>&nbsp;&nbsp;<input type="button" value="查询" id="se" onclick="myclick();">
            </Td>
        </Tr>
    </table>
</body>

jsp页面

var xmlhttp;

function getIE()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}

function lisheng(obj)
{
getIE();
var url=”${pageContext.request.contextPath}/pro_allc.action?pid=”+obj.value;
xmlhttp.open(“post”,url,true);
xmlhttp.send();
xmlhttp.onreadystatechange=getBack;
}

function getBack()
{
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{

//清空城市这个下拉框
          while(document.getElementById("yy").options.length>0)
           {
             document.getElementById("yy").removeChild(document.getElementById("yy").childNodes[0]);
           }


         //第二个：注意地方(s)
        var t= xmlhttp.responseXML.getElementsByTagName("city");

         //第三个：注意
        for(var i=0;i<t.length;i++)
            {
                 //第四个：注意地方
               var option=document.createElement("option");
               option.value=t[i].childNodes[0].childNodes[0].nodeValue;
               option.text =t[i].childNodes[1].childNodes[0].nodeValue;
               //第五个地方：注意！
               document.getElementById("yy").options.add(option);
            }

      }

}

function myclick()
{
var pid=document.getElementById(“pid”).value;
var cid=document.getElementById(“yy”).value;
alert(pid+” “+cid);
}

Action页面
// 得到省份
public String allp()
{

List arx=this.dao.getAll();
    //构造一个"请选择"
    TProvince p=new TProvince();
    p.setPId(0);
    p.setPName("---请选择---");


    ar.add(p);

    for (int i = 0; i < arx.size(); i++)
    {
        TProvince pp=(TProvince) arx.get(i);
        ar.add(pp);
    }


    return "myall";
}

// 得到省份下的城市
public String allc()
{

    try
    {

        if(pid!=0)
        {
            this.arr = this.dao.getAllC(pid);
            // 如何构造一个下拉框(第一个注意地方：xml)
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("text/xml");
            response.setCharacterEncoding("UTF-8");
            response.setHeader("Cache-Control","no-cache");
            PrintWriter out = response.getWriter();

            out.print("<response>");
            for (int i = 0; i < arr.size(); i++)
            {
                   TCity c=(TCity) arr.get(i);

                    out.print("<city>");
                    out.print("<cid>"+c.getCId()+"</cid>");
                    out.print("<cname>"+c.getCName()+"</cname>");
                    out.print("</city>");
            }
            out.print("</response>");

            out.flush();
            out.close();
        }
        else
        {

            // 如何构造一个下拉框(第一个注意地方：xml)
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("text/xml");
            response.setCharacterEncoding("UTF-8");
            response.setHeader("Cache-Control","no-cache");
            PrintWriter out = response.getWriter();

            out.print("<response>");

            out.print("<city>");
            out.print("<cid>0</cid>");
            out.print("<cname>---请选择---</cname>");
            out.print("</city>");

            out.print("</response>");

            out.flush();
            out.close();
        }


    }
    catch (Exception e)
    {
        e.printStackTrace();
    }

    return null;
}

******************************************

public List getAll()
{
List ar=this.getSesison().createQuery(“from TProvince”).list();
this.closeAll();
return ar;
}

public List getAllC(int pid)
{
    List ar=this.getSesison().createQuery("from TCity a  where a.TProvince.PId=?").setInteger(0,pid).list();
    this.closeAll();
    return ar;
}

联动省市下拉框

猜你在找的Ajax相关文章