简单的二级联动 -

sunjava2010

浏览: 13320 次
性别:
来自: 武汉

最近访客更多访客>>

project_d

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (16)

社区版块

存档分类

简单的二级联动

Ajax json XHTML XML HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>list.html</title>

<script src="ajax.js">
    </script>
    <script>
    var obj;
    var city;
    var i=1;

    function failure(result){
        alert(result);
    }
    function dowith_1(result){
         var json=eval(result);
         obj=document.getElementById("provice");
         obj.length=0;

         for(var i=0;i<json.length;i++){
            var theOption=document.createElement("option");
            theOption.innerHTML=json[i].pname;
            theOption.value=json[i].pid;
            obj.appendChild(theOption);
         }
    }
    function dowith_3(result){
         var json=eval(result);
         city=document.getElementById("city");
         city.length=0;

         for(var i=0;i<json.length;i++){
            var cityOption=document.createElement("option");
            cityOption.value=json[i].pid;
            cityOption.innerHTML=json[i].cname;
            city.appendChild(cityOption);
         }
    }
    function success(result){
        if(i==1){
           dowith_1(result);
           i++;
        }
        else{
           dowith_3(result);
        }
    }
    function init(){
        url="http://localhost:8080/wepull_ajax_connetion/province.do";
        ajax("get",url,"",success,failure);
        i++;
        urll="http://localhost:8080/wepull_ajax_connetion/allcity.do";
        ajax("get",urll,"",success,failure);
    }
    function commit(){
       i=2;
       var index=obj.selectedIndex;
       var pid = obj.options[index].value;
       url="http://localhost:8080/wepull_ajax_connetion/city.do?pid="+pid;
       ajax("get",url,"",success,failure);
    }
        window.onload=init;
    </script>
    </head>
<body>
<table>
<tr>
<td>
<select id="provice" onchange="commit()">
</select>
</td>
<td>
<select id="city">
</select>
</td>
</tr>
</table>
</body>
</html>

-------------------Ajax引用封装类----------

分享到：