省份城市jquery简单的二级联动,query代码

来源：互联网发布：网络语弹棉花啥意思编辑：程序博客网时间：2024/05/21 11:05

<!DOCTYPE html>
<html>
<head>
<title>ER_JI.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
   //页面加载
   $(function() {
       //页面加载便加载省份
       loadP();
       $("#prov").change(function(){
            //$("#city").empty();
           loadC();
       });

   });
   function loadP() {
       $.ajax({
           type : "post",
           url : "prov.do",
           cache : false,
           async : true,
           data:"opt=all",
           dataType : "json",
           success : function(datas) {
               if (datas.length > 0) {
                   for ( var i = 0; i < datas.length; i++) {
                       $("#prov").append(
                               "<option value="+datas[i].prov_id+">"
                                       + datas[i].prov_name + "</option>");
                   }
               }
           },
           error : function() {
               alert("operation failed!");
           }
       });
   }
   function loadC() {
       $.ajax({
           type : "post",
           url : "city.do",
           cache : false,
           async : true,
           data:"opt=byProvId&prov_id="+$("#prov").val(),
           dataType : "json",
           success : function(datas) {
               if (datas.length > 0) {
               $("#city").empty();
               //很无奈,此处清空之后不不全这个经成空白的了
               $("#city").append("<option value=0>请选择市</option>");
                   for ( var i = 0; i < datas.length; i++) {
                       $("#city").append(
                               "<option value="+datas[i].city_id+">"
                                       + datas[i].city_name + "</option>");
                   }
               }
           },
           error : function() {
               alert("operation failed!");
           }
       });
   }
</script>
</head>

<body>


   <br>
   <br>
   <br>
   <br>

   <select id="prov">
       <option value="0">请选择省份</opition>
   </select>省
   <select id="city">
       
       <option value="0" >请选市</opition>
   </select>市
</body>
</html>

0 0