jQuery实现三级联动菜单

jQuery实现三级联动菜单效果

思路：首先需要获取相对数据接口，我这里举例的城市接口，我准备在city.json文件中。然后使用jquery中的方法实现三级菜单联动。
js代码如下：

<script>! function($) {let $show = $('#show'); //显示框let $prov = $('#prov'); //省份let $city = $('#city'); //城市let $country = $('#country'); //县区let $btn = $('#btnclick'); //按钮//首先禁用提交按钮$btn.prop('disabled', true);//:selected 匹配所有选中的option元素//获取数据接口$.getJSON('city.json', function(provice) {console.log(provice); //获取的接口数据//遍历渲染省份或者直辖市 34$.each(provice, function(index, value) {$prov.append('+ index + '">' + value.name + '');});//利用对象存储当前省市区的索引let data = {prov: '',city: '',country: ''}//省份或者直辖市发送改变，渲染对应的城市。$prov.on('change', function() {let $provindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。//存储索引进入上面对象if (data.prov !== $provindex) { //判断不相等再进行存储。data.prov = $provindex}//渲染之前先清除前面渲染的城市。$('#city > option').first().nextAll().remove();$('#country > option').first().nextAll().remove();//解决选择完成之后，对省份改变if ($prov.val() === '=请选择省份=') {$('#city > option').first().nextAll().remove();$show.val('');$btn.prop('disabled', true);return;}if ($provindex !== '') { //判断取值不能为空，渲染对应的城市    let $cityname = provice[$provindex]['city']; //省份下面对应的城市名称，是数组。$.each($cityname, function(index, value) {$city.append('+ index + '">' + value.name + '');});}});//城市改变，渲染县区$city.on('change', function() {let $cityindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。//存储索引进入上面对象if (data.city !== $cityindex) {data.city = $cityindex}$('#country > option').first().nextAll().remove();//解决选择完成之后，对城市改变if ($city.val() === '=请选择城市=') {$('#country > option').first().nextAll().remove();$show.val('');$btn.prop('disabled', true);return;}if ($cityindex !== '') {let $countryname = provice[data.prov]['city'][$cityindex].districtAndCounty; //结果是数组$.each($countryname, function(index, value) {$country.append('+ index + '">' + value + '');});}});//县区改变$country.on('change', function() {let $countryindex = $(this).find('option:selected').val(); //获取当前选中的option的value值。if ($country.val() === '=请选择县区=') {$show.val('');$btn.prop('disabled', true);return;}//存储索引进入上面对象if (data.country !== $countryindex) {data.country = $countryindex;}if (data.prov && data.city && data.country) {$btn.prop('disabled', false);}});//点击按钮，将值传递给show盒子$btn.on('click', function() {$show.val(provice[data.prov].name + '-' + provice[data.prov]['city'][data.city].name + '-' + provice[data.prov]['city'][data.city].districtAndCounty[data.country]);});});}(jQuery);</script>

注：记得自己引入jQuery文件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！