Interfaz: "Uso del control de vinculación de área de selección de dispositivos móviles área de selección de dispositivos móviles

Después de trabajar en esto durante mucho tiempo, la información en Internet ha sido engañosa. A continuación, se resume mi propia experiencia para ayudarlo a limpiar las minas.

Como de costumbre, primero cargue las representaciones. (Graffiti Dafa es bueno)

1. Referencia. Preste atención al orden de las referencias, que es extremadamente importante.

<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. Contenido.

<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. Los js y css requeridos anteriormente se pueden descargar en esta dirección https://download.csdn.net/download/nienianzhi1744/11297165