政府门户网站设计国内优秀网站案例

注

忍不住吐槽一波。都什么年代了。现在都前后端分离，但是公司老项目非得用tp+layui。。

代码如下

layui.use(['form'], function () {var form = layui.form;//php代码渲染页面的时候，将一级分类id和二级分类id带过来，存到页面input框中，属性为hidden。方便获取这里js获取var first_category_id = $('#first_category_id').val()var second_category_id = $('#second_category_id').val()var third_category_id = $('#third_category_id').val()// 加载省份数据$.ajax({url: '',type: 'post',dataType: 'json',data: {parentId: 0},success: function (res) {//这里是select下拉框的idvar provinceSelect = $('#province');var citySelect = $('#city');var districtSelect = $('#district');$.each(res.data, function (index, item) {if (item.id == first_category_id) {provinceSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');$.ajax({url: '',type: 'post',dataType: 'json',data: {parentId: item.id},success: function (res) {$.each(res.data, function (index, item) {if (item.id == second_category_id) {citySelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');$.ajax({url: '',type: 'post',dataType: 'json',data: {parentId: item.id},success: function (res) {$.each(res.data, function (index, item) {if (item.id == third_category_id) {districtSelect.append('<option value="' + item.id + '" selected>' + item.name + '</option>');} else {districtSelect.append('<option value="' + item.id + '">' + item.name + '</option>');}})}})form.render('select');} else {citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');}})}})form.render('select');} else {provinceSelect.append('<option value="' + item.id + '">' + item.name + '</option>');}});form.render('select');}});// 监听下拉框变化事件--这里和回显没有关系了 点击事件触发form.on('select(province)', function (data) {var provinceId = data.value;if (provinceId !== '') {// 加载数据$.ajax({url: '',type: 'post',dataType: 'json',data: {parentId: provinceId},success: function (res) {var citySelect = $('#city');citySelect.empty().append('<option value="">请选择</option>');$.each(res.data, function (index, item) {citySelect.append('<option value="' + item.id + '">' + item.name + '</option>');});form.render('select');}});} else {// 清空下面两级的数据$('#city').empty().append('<option value="">请选择</option>');$('#district').empty().append('<option value="">请选择</option>');form.render('select');}});// 监听下拉框变化事件--这里和回显没有关系了 点击事件触发form.on('select(city)', function (data) {var cityId = data.value;if (cityId !== '') {// 加载区县数据$.ajax({url: '',type: 'post',dataType: 'json',data: {parentId: cityId},success: function (res) {var districtSelect = $('#district');districtSelect.empty().append('<option value="">请选择</option>');$.each(res.data, function (index, item) {districtSelect.append('<option value="' + item.id + '">' + item.name + '</option>');});form.render('select');}});} else {// 清空区县数据$('#district').empty().append('<option value="">请选择</option>');form.render('select');}});

html代码

<div class="layui-form-item"><label class="layui-form-label">商品分类：</label><div class="layui-input-inline"><select name="first" id="province" lay-filter="province"><option value="">请选择</option></select></div><div class="layui-input-inline"><select name="second" id="city" lay-filter="city"><option value="">请选择</option></select></div><div class="layui-input-inline"><select name="third" id="district" lay-filter="district"><option value="">请选择</option></select></div>
</div><input type="hidden" id="third_category_id" value="{$info.category_id}"><input type="hidden" id="second_category_id" value="{$info.second_category_id}"><input type="hidden" id="first_category_id" value="{$info.first_category_id}">