Bootstrap实现省市区三级联动(亲测可用)

bootstrap三级联动很常用，必备

本文实例就为大家分享了Bootstrap实现省市区三级联动的具体代码，供大家参考，具体内容如下

html页面

<!-- 省市区三级联动 begin -->
  <div class=\"form-group\">
   <label class=\"col-sm-2 control-label\"><i>*</i>所在地址</label>
   <div class=\"col-sm-3\">
    <select name=\"input_province\" id=\"input_province\" class=\"form-control\" >
     <option value=\"\">--请选择--</option>
    </select>
   </div>
   <div class=\"col-sm-3\">
    <select name=\"input_city\" id=\"input_city\" class=\"form-control\">
     <option value=\"\"></option>
    </select>
   </div>
   <div class=\"col-sm-3\">
    <select name=\"input_area\" id=\"input_area\" class=\"form-control\">
     <option value=\"\"></option>
    </select>
   </div>
  </div>

<!-- 省市区三级联动 end-->

js部分

<!-- 三级联动 begin -->
 <script type=\"text/javascript\" src=\"/js/plugins/address/address.js\"></script>
 <script >
  $(function () {
   var html = \"\";
   $(\"#input_city\").append(html);
   $(\"#input_area\").append(html);
   $.each(pdata,function(idx,item){
    if (parseInt(item.level) == 0) {
     html += \"<option value=\"+item.code+\" >\"+ item.names +\"</option> \";
    }
   });
   $(\"#input_province\").append(html);

   $(\"#input_province\").change(function(){
    if ($(this).val() == \"\") return;
    $(\"#input_city option\").remove();
    $(\"#input_area option\").remove();
    //var code = $(this).find(\"option:selected\").attr(\"exid\");
    var code = $(this).find(\"option:selected\").val();
    code = code.substring(0,2);
    var html = \"<option value=\'\'>--请选择--</option>\";
    $(\"#input_area option\").append(html);
    $.each(pdata,function(idx,item){
     if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
      html +=\"<option value=\"+item.code+\" >\"+ item.names +\"</option> \";
     }
    });
    $(\"#input_city \").append(html);
   });

   $(\"#input_city\").change(function(){
    if ($(this).val() == \"\") return;
    $(\"#input_area option\").remove();
    var code = $(this).find(\"option:selected\").val();
    code = code.substring(0,4);
    var html = \"<option value=\'\'>--请选择--</option>\";
    $.each(pdata,function(idx,item){
     if (parseInt(item.level) == 2 && code == item.code.substring(0,4)) {
      html +=\"<option value=\"+item.code+\" >\"+ item.names +\"</option> \";
     }
    });
    $(\"#input_area \").append(html);
   });
  });
 </script>
 <!-- 三级联动 end -->

我把js文件给上传上来了，点击这里

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。