bootstrap省市县三级联动

html部分

                                          <div class="form-group">
                                            <label class="control-label col-sm-3">所在地址</label>
                                              <div class="col-sm-8">
                                                <div class="col-sm-4">
                                                  <select name="input_province" id="input_province" class="form-control">
                                                    <option value="">--请选择--</option></select>
                                                </div>
                                                <div class="col-sm-4">
                                                  <select name="input_city" id="input_city" class="form-control">
                                                    <option value=""></option>
                                                  </select>
                                                </div>
                                                <div class="col-sm-4">
                                                  <select name="input_area" id="input_area" class="form-control">
                                                    <option value=""></option>
                                                  </select>
                                                </div>
                                              </div>
                                          </div>

 js部分

  <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.names + "' exid='" + 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"); code = code.substring(0,2);
            var html = "<option value=''>--请选择--</option>"; $("#input_area").append(html);
            $.each(pdata,function(idx,item){
                if (parseInt(item.level) == 1 && code == item.code.substring(0,2)) {
                    html += "<option value='" + item.names + "' exid='" + 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").attr("exid"); 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.names + "' exid='" + item.code + "'>" + item.names + "</option>";
                }
            });
            $("#input_area").append(html);
        });
  });
  
  
  </script>

配置参数

http://www.snschina.com/wp-content/uploads/2017/07/884d9804999fc47a3c26.js

效果图

引用http://www.snschina.com/archives/2604