省份城市jquery简单的二级联动,query代码_jquery省级代码-优快云博客

这是一个使用jQuery实现的省份城市二级联动的示例。当选择省份时，通过AJAX动态加载相应城市的选项。代码中包含`loadP()`和`loadC()`两个函数，分别用于加载省份和根据省份ID加载城市。示例使用了`$.ajax`进行异步数据交互，数据类型为JSON。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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