思路

• 首先渲染省会列表
• 省会列表一发生则展示城市，还有默认的学校
• 城市一发生变化则展示学校

 <ul class="content">
    <li class="item">
      <div class="left">省会</div>
      <div class="right">
        <select name="province" id="province">
          <option value="0000">省会</option>
        </select>
      </div>
    </li>
    <li class="item">
      <div class="left">城市</div>
      <div class="right">
        <select name="city" id="city">
        </select>
      </div>
    </li>
    <li class="item">
      <div class="left">学校</div>
      <div class="right">
        <select name="school" id="school">
        </select>
      </div>
    </li>
  </ul>

/**
 * 首先清除列表，创建一个option，并且追加到相应的Dom
 * obj 是字典匹配的值
 * dom 是创建option后追加的父级
 * upperDom 判断是否有上一级发生变化，接着获取数据
 */
 function createOption(obj, dom, upperDom) {
  // 清空当前列表
  dom.innerHTML = ''
  // 获取上级Dom数据，即上级数据
  if (upperDom) {
    var val = upperDom.value
    obj = obj[val]  
  }
  for (var prop in obj) {
    var optionDom = document.createElement('option')
    optionDom.value = prop
    optionDom.innerText = obj[prop]
    dom.appendChild(optionDom)
  }
}

var provinceDom = document.getElementById('province')
var cityDom = document.getElementById('city')
var schoolDom = document.getElementById('school')

createOption(province, provinceDom)

provinceDom.onchange = function () {
  createOption(city, cityDom, provinceDom)
  createOption(allschool, schoolDom, cityDom)
  
}

cityDom.onchange = function () {
  createOption(allschool, schoolDom, cityDom)
}

// 省略各级省市学校的写法
var province = {
  "10": "北京市",
}

var city = {
  "10": {
      "317": "北京市"
  }
}

var allschool = {
  "317": [
      "北京大学",
      ]
}