jquery利用select实现多级联动（省市县）

jquery如何利用select实现多级联动，下面web建站小编就以省市县为例给大家做一个简单的介绍！

1、html代码

<select id="prvoince">
  <option>--请选择省份--</option>
</select>
<!--选择市-->
<select id="city">
  <option>--请选择城市--</option>
</select>
<select id="district">
  <option>--请选择区--</option>
</select>

2、js代码

var prvo = ["安徽", "陕西"];
var cit = [["徽市1", "徽市2"],["陕市1", "陕市2"]];
var dis = [[["徽县1", "徽县2"],["徽区1", "徽区2"]],[["陕县1", "陕县2"],["陕区1", "陕区2"]]]
$(function() {
  //初始化省份
  for(var i = 0; i < prvo.length; i++) {
    $("#prvoince").append("<option>" + prvo[i] + "</option>")
  }
  //选择省
  $("#prvoince").on('change', function() {
    $('#city').text(' ');
    $('#district').text(' ');
    var proIndex = $("#prvoince option:selected").index();
    var citys = cit[proIndex - 1]
    for(var i = 0; i < citys.length; i++) {
      $("#city").append("<option>" + citys[i] + "</option>")
    }
  })
  //选择省
  $("#city").on('change',function(){
    $("#district").empty()
    var proIndex = $("#prvoince option:selected").index();
    var citIndex = $("#city option:selected").index()
    var distr = dis[proIndex - 1][citIndex]
    for (var i = 0; i < distr.length; i++) {
      $("#district").append("<option>" + distr[i]+ "</option>")
    }
  })})