JS封装的三级联动菜单(使用时只需要一行js代码)

为了实现“JS封装的三级联动菜单”，我们需要使用以下技术：

HTML和CSS
JavaScript编程语言
Ajax技术

下面就介绍如何实现这个菜单：

1. 编写HTML和CSS

首先我们需编写一个select菜单，选择项分别是省份、城市、区域，菜单与菜单之间有“省份”、“城市”、“区域”的文字提示。

HTML代码如下：

<div class="address-select">
  <select id="province" name="province">
    <option value="">请选择省份</option>
  </select>
  <select id="city" name="city">
    <option value="">请选择城市</option>
  </select>
  <select id="area" name="area">
    <option value="">请选择区域</option>
  </select>
</div>

这里我们使用了一个div标签包裹了三个select标签，用class属性设置样式。

然后编写CSS代码：

.address-select select {
  width: 150px;
  height: 35px;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
}

这里设置了select标签的样式，包括宽度、高度、字体大小和圆角半径等。

2. 获取数据

我们需要获取省市区数据来填充我们的菜单，这里我们使用Ajax技术来异步获取数据。

function getJson(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        callback(data);
      } else {
        console.log('获取数据失败！');
      }
    }
  }
  xhr.send();
}

getJson('data.json', function(data) {
  console.log(data);
});

这里我们编写了一个getJson函数来获取JSON格式的数据，该函数接收两个参数：数据文件的URL和回调函数。回调函数用来处理我们异步获取到的数据。

在调用getJson函数时，我们传递的参数是data.json文件的URL和一个回调函数，以打印出获取的数据为例。

3. 封装三级联动菜单

根据上面的两步，我们就可以封装我们的三级联动菜单了。

function AddressSelector(element) {
  // 获取省市区数据
  function getJson(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Content-type', 'application/json');
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var data = JSON.parse(xhr.responseText);
          callback(data);
        } else {
          console.log('获取数据失败！');
        }
      }
    }
    xhr.send();
  }

  // 创建select菜单
  function createSelect(data, parent, defaultOption) {
    var select = document.createElement('select');
    select.innerHTML = defaultOption;

    for (var i = 0, len = data.length; i < len; i++) {
      var option = document.createElement('option');
      option.value = data[i].value;
      option.innerText = data[i].text;
      select.appendChild(option);
    }

    parent.appendChild(select);
    return select;
  }

  // 级联菜单
  function cascadeSelect(parent, data, defaultOption) {
    parent.innerHTML = '';
    var select = createSelect(data, parent, defaultOption);

    select.onchange = function(e) {
      if (this.nextSibling) {
        cascadeSelect(this.nextSibling, data[this.selectedIndex - 1].children, defaultOption);
      }
    }
  }

  getJson('data.json', function(data) {
    cascadeSelect(element, data, '<option value="">请选择</option>');
  });
}

var addressSelector = document.querySelector('.address-select');
new AddressSelector(addressSelector);

上面的代码中，我们定义了一个AddressSelector的构造函数，该函数接收一个参数，即表示要以哪个元素为父元素来创建三级联动菜单。

在构造函数内部，我们首先要获取省市区数据。
然后创建select菜单，用来放置省、市、区的选项，这里我们使用了createSelect函数来创建菜单，并将其附加到指定的父元素上。
最后，我们定义了cascadeSelect函数，用来处理级联关系，也就是当省份选项改变后，城市选项和区域选项要做出相应的改变。在cascadeSelect函数内部，我们清空父元素、创建一个新的select菜单、设置默认选项，并添加选项。当省份选项改变时，我们就创建新的子菜单。

最后，在构造函数的最后一行，我们调用了前面定义的AddressSelector构造函数，来创建一个三级联动菜单并附加到指定的父元素上。

示例说明

以使用jQuery框架实现三级联动菜单为例，代码如下：

$(function() {
  function initAddress() {
    $('#province').change(function() {
      var pid = $(this).val();
      if (pid) {
        $.getJSON('data.json', {pid: pid}, function(data) {
          var cityOptions = '<option value="">请选择城市</option>';
          var areaOptions = '<option value="">请选择区域</option>';

          $.each(data, function(index, item) {
            cityOptions += '<option value="' + item.value + '">' + item.text + '</option>';
          });

          $('#city').html(cityOptions);
          $('#area').html(areaOptions);
        });
      } else {
        $('#city').html('<option value="">请选择城市</option>');
        $('#area').html('<option value="">请选择区域</option>');
      }
    });

    $('#city').change(function() {
      var cid = $(this).val();
      if (cid) {
        $.getJSON('data.json', {cid: cid}, function(data) {
          var areaOptions = '<option value="">请选择区域</option>';

          $.each(data, function(index, item) {
            areaOptions += '<option value="' + item.value + '">' + item.text + '</option>';
          });

          $('#area').html(areaOptions);
        });
      } else {
        $('#area').html('<option value="">请选择区域</option>');
      }
    });
  }

  initAddress();
});

这里我们使用了jQuery框架，首先创建了一个initAddress函数，用来初始化省市区菜单。在该函数内部，我们首先监听省份选项的改变事件，当省份选项改变后，我们通过Ajax异步获取城市数据，并将城市选项添加到城市菜单中，同时清除区域选项。当城市选项改变后，我们同样根据城市的id异步获取区域数据，并将其添加到区域菜单中。

我们还可以使用Vue框架来实现三级联动菜单，代码如下：

<template>
  <div class="address-select">
    <select v-model="province" @change="updateCity">
      <option value="">请选择省份</option>
      <option v-for="(item, index) in provinces" :value="item.value">{{ item.text }}</option>
    </select>

    <select v-model="city" @change="updateArea" v-if="cities.length">
      <option value="">请选择城市</option>
      <option v-for="(item, index) in cities" :value="item.value">{{ item.text }}</option>
    </select>

    <select v-model="area" v-if="areas.length">
      <option value="">请选择区域</option>
      <option v-for="(item, index) in areas" :value="item.value">{{ item.text }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 省份选项
      provinces: [],
      // 当前选中的省份
      province: '',
      // 城市选项
      cities: [],
      // 当前选中的城市
      city: '',
      // 区域选项
      areas: [],
      // 当前选中的区域
      area: '',
    };
  },

  created() {
    this.loadProvinces();
  },

  methods: {
    // 加载省份列表
    loadProvinces() {
      axios.get('data.json').then(response => {
        this.provinces = response.data;
      });
    },

    // 更新城市列表
    updateCity() {
      axios.get('data.json', { params: { pid: this.province } }).then(response => {
        this.cities = response.data;
        this.areas = [];
        this.city = '';
        this.area = '';
      });
    },

    // 更新区域列表
    updateArea() {
      axios.get('data.json', { params: { cid: this.city } }).then(response => {
        this.areas = response.data;
        this.area = '';
      });
    },
  },
};
</script>

在该示例中，我们使用了Vue框架，通过声明式渲染来创建三级联动菜单。在data方法中定义了四个变量：provinces，province，cities和areas，分别表示省份、当前选中的省份、城市和区域。在created方法中，我们调用了loadProvinces方法来获取省份数据。在loadProvinces方法中，我们使用axios库来发起异步请求，并将返回的数据赋值给provinces变量。在updateCity和updateArea方法中，我们更新城市和区域的选项，同样使用axios库来发起异步请求，并将返回的数据赋值给相应的变量。其中，updateCity方法用来更新城市选项，同时清空区域选项和当前选中的城市，而updateArea方法只需要更新区域选项即可。在template标签中，我们使用了v-model指令来绑定选项的值，以及v-for指令来循环渲染选项。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS封装的三级联动菜单(使用时只需要一行js代码) - Python技术站

JS封装的三级联动菜单(使用时只需要一行js代码)

1. 编写HTML和CSS

2. 获取数据

3. 封装三级联动菜单

示例说明

相关文章