省市区三级联动 数据库取数据js代码

时间:2022-05-06 11:35:51

//页面部分代码

<div class="mui-input-row">
<label class="txt2">丢失地点</label> 
<!-- 用于保存省份的name -->
<input type="hidden" id="liveProvinceBaseName" name="  ">
<select class="mui-inline mui-select" id="province" name="  " >
<option>省</option>
</select>
</div>
<div class="mui-input-row">
<label style="display: none;">Input</label>
<!-- 用于保存市区的name -->
<input type="hidden" id="liveCityBaseName" name="  ">
<select class="mui-inline mui-select" id="city" name="  ">
      <option>市</option>
 
</select>
</div>
<div class="mui-input-row">
<label style="display: none;">Input</label> 
<!-- 用于保存区县的name -->
<input type="hidden" id="liveDowntownBaseName" name=" ">
<select class="mui-inline mui-select" id="county" name=" ">
<option>区/县</option>
</select>
</div>


//js代码

$(document).ready(function(){


$.ajax({
        type: "post",
        dataType: "json",
        url: "  ",
        success: function(data){

      var result = "<option>选择省份</option>"
      $.each(data, function(i, item) {
      result +="<option value='"+item.proId+"'>"+item.proName+"</option>";
      });
      $("#province").html('');
        $("#province").append(result);
        }
    });


$("#province").change(function () {
var selectedIndex = document.getElementById("province").selectedIndex;
$("#liveProvinceBaseName").val(document.getElementById("province").options[selectedIndex].text);
  $.ajax({
           type: "post",
           dataType: "json",
           url: "  ",
           data: {provinceid:$("#province").val()},
           success: function(data){

          var result = "<option>选择城市</option>"
          $.each(data, function(i, item) {
          result +="<option value='"+item.cityId+"'>"+item.cityName+"</option>";
          });
          $("#city").html(' ');
            $("#city").append(result);
            
            var result1 = "<option>选择区域</option>";
            $("#county").html(' ');
            $("#county").append(result1);
           }
       });
  });
  
  
  $("#city").change(function () {
var selectedIndex = document.getElementById("city").selectedIndex;
$("#liveCityBaseName").val(document.getElementById("city").options[selectedIndex].text);

  $.ajax({
          type: "get",
          dataType:"json",
          url: " ",
          data: {cityid:$("#city").val()},
          success: function(data){

          var result = "<option>选择区域</option>";
          $.each(data, function(i, item) {
          result +="<option value='"+item.dtId+"'>"+item.downtownName+"</option>";
          });
          $("#county").html('');
          $("#county").append(result);
          }
      });
    });
  
  $("#county").change(function () {
var selectedIndex = document.getElementById("county").selectedIndex;
$("#liveDowntownBaseName").val(document.getElementById("county").options[selectedIndex].text);
  });
  
});