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>")
    }
  })})

html怎样动态设置select默认选项

layui做城市三级联动代码介绍

远离javascript/jquery纯css3实现多级导航栏联动

纯js实现二级联动代码

vuejs实现全站联动

标签： select, 三级联动, 多级联动

上面是“jquery利用select实现多级联动（省市县）”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2715.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！