Frontend——"Use of mobile-select-area linkage control of provinces and cities on mobile phone

After working on this thing for a long time, the information on the Internet has been misleading for a long time. The following summarizes my own experience to help you clear mines.

As usual, first upload the renderings. (Graffiti Dafa is good)

1. Reference. Pay attention to the order of citations, which is extremely important.

<link rel="stylesheet" href="../../lib/css/mobile-select-area.css">
<link rel="stylesheet" href="../../lib/css/dialog.css">
<script src="../../lib/mobiscroll/js/jquery-2.2.4.min.js"></script>
<script src="../../lib/mobiscroll/js/dialog.js"></script>
<script src="../../lib/mobiscroll/js/mobile-select-area.js"></script>
<script src="../../js/data.js"></script>

2. Content.

<div class="label">省&nbsp;&nbsp;&nbsp;市</div>
<div class="input triangle">
  <input type="text" placeholder="地址:请选择省市区" id="check_area" >
  <span id="_check" class="check"><i></i></span>
</div>

3,jquery。

<script type="text/javascript">
  /*必须先加载mobile-select-area.js才能new下面这个对象*/
  var selectArea = new MobileSelectArea();
  /*areaDataJson是包含了省市的json格式的js,js中定义了全局变量areaDataJson,此时直接调用,
   *level=2表示只展示省市两级,level=3表示展示省市县3级*/
  selectArea.init({trigger:'#check_area',data:areaDataJson,default:1,level:2});
</script>

4. The above required js and css can be downloaded at this address https://download.csdn.net/download/nienianzhi1744/11297165

 

Guess you like

Origin blog.csdn.net/nienianzhi1744/article/details/95095831