house_select_city.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. //查询赋值
  2. function query(form) {
  3. var _vals = $('input[name=select_province]').val();
  4. var _vals1 = $('input[name=select_city]').val();
  5. var _vals2 = $('input[name=select_area]').val();
  6. provinceChange(form, _vals, _vals1, _vals2);
  7. }
  8. function loadProvince(pid = 0) {
  9. $.ajax({
  10. url: '/categorycity/citypid',
  11. type: 'post',
  12. async: false,//使用同步的方式,true为异步方式
  13. data: {'pid': pid},//这里使用json对象
  14. success: function (data) {
  15. // console.log(data);
  16. var areaData = data.data;
  17. provinceChange(form, areaData, data_.city, data_.county);
  18. },
  19. fail: function () {
  20. }
  21. });
  22. }
  23. /**
  24. * 初始化省
  25. */
  26. function provinceChange(form, provinceValue, cityValue, countyValue) {
  27. $.ajax({
  28. url: '/categorycity/citypid',
  29. type: 'post',
  30. async: false,//使用同步的方式,true为异步方式
  31. data: {'pid': 0},//这里使用json对象
  32. success: function (data) {
  33. // console.log(data);
  34. var provinces = data.data;
  35. var province = $('select[name=province]');
  36. province.empty();
  37. province.append('<option value="' + "" + '">' + "请选择省" + '</option>');
  38. for (var i = 0; i < provinces.length; i++) {
  39. if (provinces[i].id == provinceValue) {
  40. province.append('<option selected value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  41. } else {
  42. province.append('<option value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  43. }
  44. }
  45. form.render('select');
  46. cityChange(form, provinceValue, cityValue, countyValue);
  47. },
  48. fail: function () {
  49. }
  50. });
  51. }
  52. /**
  53. * 初始化市
  54. */
  55. function cityChange(form, provinceValue, cityValue, countyValue) {
  56. //改变市
  57. var province = $('select[name=city]');
  58. province.empty();
  59. province.append('<option value="' + "" + '">' + "请选择市" + '</option>');
  60. if (provinceValue) {
  61. $.ajax({
  62. url: '/categorycity/citypid',
  63. type: 'post',
  64. async: false,//使用同步的方式,true为异步方式
  65. data: {'pid': provinceValue},//这里使用json对象
  66. success: function (data) {
  67. // console.log(data);
  68. var provinces = data.data;
  69. for (var i = 0; i < provinces.length; i++) {
  70. if (provinces[i].id == cityValue) {
  71. province.append('<option selected value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  72. } else {
  73. province.append('<option value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  74. }
  75. }
  76. form.render('select');
  77. countyChange(form, cityValue, countyValue);
  78. },
  79. fail: function () {
  80. }
  81. });
  82. }
  83. }
  84. /**
  85. * 初始化县/区
  86. */
  87. function countyChange(form, cityValue, countyValue) {
  88. //改变县/区
  89. var province = $('select[name=area]');
  90. province.empty();
  91. province.append('<option value="' + "" + '">' + "请选择县/区" + '</option>');
  92. if (cityValue) {
  93. $.ajax({
  94. url: '/categorycity/citypid',
  95. type: 'post',
  96. async: false,//使用同步的方式,true为异步方式
  97. data: {'pid': cityValue},//这里使用json对象
  98. success: function (data) {
  99. // console.log(data);
  100. var provinces = data.data;
  101. for (var i = 0; i < provinces.length; i++) {
  102. if (provinces[i].id == countyValue) {
  103. province.append('<option selected value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  104. } else {
  105. province.append('<option value="' + provinces[i].id + '">' + provinces[i].city_name + '</option>');
  106. }
  107. }
  108. form.render('select');
  109. },
  110. fail: function () {
  111. }
  112. });
  113. }
  114. }
  115. layui.use(['form'], function () {
  116. var $ = layui.$
  117. , layer = layui.layer
  118. , form = layui.form;
  119. //查询赋值
  120. query(form);
  121. /*监听省select*/
  122. form.on('select(provinceone)', function (data) {
  123. cityChange(form, data.value, "", "")
  124. });
  125. /*监听市select*/
  126. form.on('select(cityone)', function (data) {
  127. countyChange(form, data.value, "")
  128. });
  129. });