Select2下拉框联动

      场景是通过一个下拉框选中部门后，角色下拉框根据部门id展示该部门下的所有角色。

项目前台采用的是bootstrap +velocity ，所以页面上部门的下拉框根据后台数据采用velocity遍历赋值：

                <select id="officeName" name="officeName" class="form-control" οnchange="changeData()">
                    #foreach($item in ${orgs})
                   <optgroup label="$item.name">
                   #foreach($org in $item.subOrg)
                        <option value="$!org.id">$!org.name</option>
                        </optgroup>
                  #end
                  #end
             </select>

角色下拉框代码：

             <select id="role" name="role"  class="form-control">
             </select>

        当部门下拉框改变的时候出发onchange方法，角色下拉框根据部门id去后台获取当前部门下的所有角色。当页面初始化的时候，首先将部门下拉框选择为空

         // 默认部门初始选择为空
        $("#officeName").val(null).trigger("change");

        onchange方法：

    function changeData(){
        // 获取部门下拉框选中的值
        var v = $("#officeName").val();
        if( v == null){
            // 下拉框禁用
            $("#role").prop("disabled", true);
        }else{
            // 部门选择后下拉框启用
            $("#role").prop("disabled", false);

            // 角色联动部门下拉框
            var url = "/user/getrole/" + v;
            var role = $("#role");
            // 向后台请求获取数据
            $.getJSON(url,function (data) {
                if (data == "") {
                    swal('该部门下未维护角色，请先添加角色!');
                }
                else {
                    // 遍历部门下的角色给下拉框赋值
                    $.each(data,function(i,value){
                        var tempOption = document.createElement("option");
                        tempOption.value = value.id;
                        tempOption.innerHTML  = value.name;
                        role.append(tempOption);
                    });
                }
            });
        }
    }