简单三级联动

时间:2019-06-17
本文章向大家介绍简单三级联动,主要包括简单三级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<select id="brand">
  <option>—请选择—</option>
</select>
<select id="s_cpu">
  <option>—请选择—</option>
</select>
<select id="spec">
  <option>—请选择—</option>
</select>
let brand = ['英特尔', 'amd']
  let cpu = [
    ['i5', 'i7'],
    ['2700', '2700X']
  ]
  let spe = [
    [
      ['5840', '5740', '5640'],
      ['7700k', '8700k', '9700k'],
    ],
    [
      ['max', 'max s', 'max ss'],
      ['sss', 's max', 'max']
    ]
  ]
  // 获取
  let s = document.getElementById('brand')
  let s_cpu = document.getElementById('s_cpu')
  let spec = document.getElementById('spec')
  //for循环使js里的brand元素添加到s里
  for (let i = 0; i < brand.length; i++) {
    let option = new Option(brand[i], i)
    s.appendChild(option)
  }
  // 事件
  let types
  s.onchange = function () {
    s_cpu.options.length = 1
    spec.options.length = 1
    let index = this.value
    let shi = cpu[index]
    types = spe[index]
    for (let i = 0; i < shi.length; i++) {
      let option = new Option(shi[i], i)
      s_cpu.appendChild(option)
    }
  }
  s_cpu.onchange = function () {
    spec.options.length = 1
    let index = this.value
    let scpu = types[index]
    for (let i = 0; i < scpu.length; i++) {
      let option = new Option(scpu[i], i)
      spec.appendChild(option)
    }
  }

原文地址:https://www.cnblogs.com/ronle/p/11042293.html