您的位置：首页 > Web前端 > JQuery

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

2017-05-13 19:49 417 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 二级联动

相关文章推荐

新的分享

章节导航