三级联动.js

// 三个为单独接口
function renderDept(userInfo) {
		var bgs = [],
			dps = [],
			centers = [],
			dept_compiled = '',
			dept_html = ''
  
		var getBg = function() {
			return $.getJSON('/api/base/dept')
				.done(function(res) {
					bgs = res
				})
				.fail(function(res) {
					console.err(res)
				})
		}
  
		var getDept = function(bg_id) {
			return $.getJSON('/api/base/dept?bg_id=' + bg_id)
				.done(function(res) {
					dps = res
				})
				.fail(function(res) {
					console.error(res);
				});
		}
  
		var getCenter = function(dept_id) {
			return $.getJSON('/api/base/dept?dept_id=' + dept_id)
				.done(function(res) {
					centers = res
				})
				.fail(function(res) {
					console.error(res);
				})
		}
  
		$.when(getBg(), getDept(userInfo.bg_id), getCenter(userInfo.dept_id)).then(function() {
			render()
		})
  
		// 监听 bg
		$(document).on('change', 'select[name=bg]', function() {
			userInfo.bg_id = $(this).val()
  
			$.when(getDept(userInfo.bg_id)).then(function() {
				userInfo.dept_id = dps[0].id
				$.when(getCenter(userInfo.dept_id)).then(function() {
					render()
				})
			})
		})
  
		// 监听 dept
		$(document).on('change', 'select[name=dp]', function() {
			userInfo.dept_id = $(this).val()
  
			$.when(getCenter(userInfo.dept_id)).then(function() {
				render()
			})
		})
  
		function render() {
			dept_compiled = Template($('#dept_template').text())
			dept_html = dept_compiled({
				bgs: bgs,
				dps: dps,
				centers: centers,
				user: userInfo
			})
			$('#dept').html(dept_html)
		}
	}