【select2下拉框】带搜索功能以及实现关联下拉框

需求

1、有两个下拉框

• 地区下拉框
• 机构下拉框

2、地区变化，机构下拉框中内容也随之变化。
3、当地区为空时，显示全部机构列表

效果展示

代码实现

1、前端
（具体样式相关代码不在此展示）

<div class="form-group">
     <label for="org" class="control-label col-xs-1">机构名称</label>
     <div class="col-xs-2">
          <select id="area" name="area" class="js-example-templating js-states form-control">
          	<option></option>
          </select>
      </div>
      <div class="col-xs-2">
           <select id="org" name="org" class="js-example-templating js-states form-control">
                   <option></option>
           </select>
      </div>
</div>



<script>
$(function () {
		//初始化地区下拉框
        $("#area").select2({
            placeholder: "请选择地区",
            allowClear: true,
            ajax: {
                type: 'post',
                url: '',//此处填写自己的后台接口
                dataType: 'json',
                data:function (params) {
                    //请求的参数
                    var query = {
                        //搜索功能核心。后台直接取search参数，模糊查询即可
                        search: typeof (params.term) == 'undefined' ? "" : params.term,
                    };
                    return query;
                },
                processResults: function(res) {
                	//一定要[{"id":"","text":""},{}...]格式
                    let result = res.data.result;
                    return {
                        results: result
                    };
                }
            }
        });
        //首次加载全部机构列表
        loadOrg("");
        //地区变化，重新加载机构列表
        $("#area").on('change',function (e) {
            let area = $("#area").val();
            $("#org").select2('destroy').empty();
            loadOrg(area);
        })
    })
    
    //渲染机构下拉框
    function loadOrg(area) {
        $("#org").select2({
            placeholder: "请选择机构",
            allowClear: true,
            ajax: {
                type: 'post',
                url: '',//此处填写自己的后台接口
                dataType: 'json',
                data: function (params) {
                    //请求的参数：地区编码、搜索关键字
                    var query = {
                        area_code: area,
                        search: typeof (params.term) == 'undefined' ? "" : params.term,
                    }
                    return query;
                },
                processResults: function (res) {
                    let result = res.data.data;
                    return {
                        results: result
                    };
                }
            }
        })
    }
</script>