js省市联动，和页面跳转的结合使用

Question

大佬们，我想完成一个省市联动！简单的介绍就是想通过第一个下拉列表选中省之后，第二个下拉列表可以自动匹配到相应的城市，然后再做一个页面跳转的按钮，点击这个按钮就可以跳转到所选省市的介绍网页！这个该怎么完成呢？
请大佬们帮我一下！
非常感谢！

Answer 1

<select id="lv1">
</select>
<select id="lv2">
</select>
<select id="lv3">
</select><script>
var data = [
  {id: '001', txt: '1', pid: '0'},
  {id: '0011', txt: '1-1', pid: '001'},
  {id: '00111', txt: '1-1-1', pid: '0011'},
  {id: '00112', txt: '1-1-2', pid: '0011'},
  {id: '0012', txt: '1-2', pid: '001'},
  {id: '00121', txt: '1-2-1', pid: '0012'},
  {id: '00122', txt: '1-2-2', pid: '0012'},
  {id: '0013', txt: '1-3', pid: '001'},
  {id: '00131', txt: '1-3-1', pid: '0013'},
  {id: '00132', txt: '1-3-2'},
  {id: '0014', txt: '1-4', pid: '001'},
  {id: '00141', txt: '1-4-1', pid: '0014'},
  {id: '00142', txt: '1-4-2', pid: '0014'},
  {id: '002', txt: '2', pid: '0'},
  {id: '0021', txt: '2-1', pid: '002'},
  {id: '00211', txt: '2-1-1', pid: '0021'},
  {id: '00212', txt: '2-1-2', pid: '0021'},
  {id: '00213', txt: '2-1-3', pid: '0021'},
  {id: '00214', txt: '2-1-4', pid: '0021'},
  {id: '0022', txt: '2-2', pid: '002'},
  {id: '00221', txt: '2-2-1', pid: '0022'},
  {id: '00222', txt: '2-2-2', pid: '0022'},
  {id: '00223', txt: '2-2-3', pid: '0022'},
  {id: '00224', txt: '2-2-4', pid: '0022'},
  {id: '0023', txt: '2-3', pid: '002'},
  {id: '00231', txt: '2-3-1', pid: '0023'},
  {id: '00232', txt: '2-3-2', pid: '0023'},
  {id: '00233', txt: '2-3-3', pid: '0023'},
  {id: '00234', txt: '2-3-4', pid: '0023'},
]
var lv1 = document.getElementById('lv1')
var lv2 = document.getElementById('lv2')
var lv3 = document.getElementById('lv3')
function init() {
  var opt_lv1 = []
  data.forEach((item) => {
    if (item.pid === '0') {
      opt_lv1.push(`<option value='${item.id}'>${item.txt}</option>`)
    }
  })
  lv1.innerHTML = opt_lv1.join('')
  lv1.value = ''
  lv1.onchange = function () {
    var opt_lv2 = []
    lv2.innerHTML = ''
    lv3.innerHTML = ''
    var lv2_data = data.filter(item => item.pid === lv1.value)
    lv2_data.forEach((item) => {
      opt_lv2.push(`<option value='${item.id}'>${item.txt}</option>`)
    })
    lv2.innerHTML = opt_lv2.join('')
    lv2.value = ''
  }
  lv2.onchange = function () {
    var opt_lv3 = []
    lv3.innerHTML = ''
    var lv3_data = data.filter(item => item.pid === lv2.value)
    lv3_data.forEach((item) => {
      opt_lv3.push(`<option value='${item.id}'>${item.txt}</option>`)
    })
    lv3.innerHTML = opt_lv3.join('')
    lv3.value = ''
  }
}
init()
</script>

Answer 2

可以根据2楼给的demo写

Answer 3

   var obj = [
        {
            province:"河北",
            children:['邯郸','石家庄']
        }
    ]
你可以这么写数据呀 如果要有点击事件的话把children里的元素换成对象   里面两个属性 一个是城市名 一个是跳转的地址