我这边是使用php实现的，java,python,go，也一样，无非就是写两个接口操作数据库，一个新增接口，一个删除接口，前端html是通用的！ 是这样的公司最近想实现一个跟城市联动相似的功能
具体的要求：每个商户要有所在省份，所在城市，屏蔽省份，屏蔽城市
还要有前后端的联动，页面上的显示也要明显一点
可以添加也可以删除
我查了layui文档，发现没有拿过来就能用的
就自己修改了一下，现在分享一下代码
具体效果如下图：
前端html代码：
这里的js和css直接用官网的就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所在省市和屏蔽省市</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/ladmin/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/ladmin/css/public.css" media="all">
<style>
.layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
height: 34px;
line-height: 34px;
padding: 0 8px;
}
.layui-input-block{
margin-left: 10px;
}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<form class="layui-form" action="" >
<fieldset class="layui-elem-field layui-field-title">
<legend>省市设置</legend>
</fieldset>
<div class="layui-form-item" id="area-picker">
<div class="layui-input-block">
<div class="layui-input-inline">
<select name="status" class="status-selector" data-value="" lay-filter="status-1">
<option value="1">所在省份</option>
<option value="2" selected>所在城市</option>
<option value="3">屏蔽省份</option>
<option value="4">屏蔽城市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="province" class="province-selector" data-value="" lay-filter="province-1">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" class="city-selector" data-value="" lay-filter="city-1">
<option value="">请选择市</option>
</select>
</div>
<button class="layui-btn" id="confirm-btn">确认</button>
</div>
</div>
</form>
<div id="selected-areas">
{volist name="city_pro" id='v'}
<button class="layui-btn layui-btn-button" id="{$v.id}" style="margin-top: 1rem">{$v.statusname}{$v.city_name}
<i class="layui-icon layui-icon-close"></i>
</button>
{/volist}
</div>
</div>
</div>
<script src="/ladmin/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/ladmin/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
layui.use(['form', 'layer', 'layarea'], function() {
var form = layui.form,
layer = layui.layer,
layarea = layui.layarea,
$ = layui.$;
// 城市选择器
layarea.render({
elem: '#area-picker',
change: function (res) {
//选择结果
console.log(res);
}
});
// 删除功能
function deleteArea(cid, $button) {
$.post('/jyht/Shopuserclass/onedit_city_new_del', {cid: cid}, function(delRes) {
if (delRes.code == 200) {
layer.msg('删除成功');
$button.remove();
} else {
layer.msg(delRes.msg);
}
});
}
// 绑定现有按钮的删除事件
$('#selected-areas').find('button').each(function() {
var $button = $(this);
var cid = $button.attr('id');
$button.on('click', function() {
deleteArea(cid, $button);
});
});
// 为第一个按钮设置 margin-left
$('#selected-areas').find('button:first').css('margin-left', '10px');
// 确认按钮点击事件
$('#confirm-btn').on('click', function(event) {
event.preventDefault(); // 阻止默认提交行为
var selectedProvince = $('[name="province"]').val();
var selectedCity = $('[name="city"]').val();
var selectedStatus = $('[name="status"]').val();
var shop_id = {$user_id}; // 假设商店ID为1
if (!selectedProvince) {
layer.msg('请选择省份');
return false;
}
if (!selectedCity) {
selectedCity = '暂无';
}
$.post('/jyht/Shopuserclass/onedit_city_new', {province: selectedProvince, city: selectedCity, status: selectedStatus, shop_id: shop_id}, function(res) {
if (res.code == 200) {
layer.msg('提交成功');
// 新增多选框按钮
var $newButton = $('<button class="layui-btn layui-btn-button" id="' + res.cid + '" style="margin-top: 1rem">' + res.statusname + ' ' + res.cityName + ' <i class="layui-icon layui-icon-close"></i></button>');
// 绑定删除按钮点击事件
$newButton.on('click', function() {
deleteArea(res.cid, $newButton);
});
$('#selected-areas').append($newButton);
} else {
layer.msg(res.msg);
}
return false;
});
});
});
</script>
</body>
</html>
后端onedit_city_new新增代码：
public function onedit_city_new(){
$data = input();
if ($data['status'] == 1 || $data['status'] == 3){$userinfo['city_name'] = $data['province'];}
if ($data['status'] == 2 || $data['status'] == 4){$userinfo['city_name'] = $data['city'];}
if ($data['status'] == 1){$statusname = '所在省：';}
if ($data['status'] == 2){$statusname = '所在市：';}
if ($data['status'] == 3){$statusname = '屏蔽省：';}
if ($data['status'] == 4){$statusname = '屏蔽市：';}
//根据status判断是省份还是城市然后返回名称
$userinfo['city_id'] = $this->city_id($userinfo['city_name'],$data['status']);
$userinfo['shop_id'] = $data['shop_id'];
$userinfo['status'] = $data['status'];
//判断要是所在城市已经有对应的屏蔽城市不让他提交并且返回错误提示
if ($this->status_city_pro($userinfo['city_id'],$userinfo['shop_id']) == 1){
return blackerror("您已经设置过相同的所在或屏蔽省市，请先取消再提交");
}
//存在添加不存在删除
$info = new Shopcity();
$userinfo['update_time'] = time();
$userinfo['create_time'] = time();
$isinfo = $info->insertGetId($userinfo);
if ($isinfo){
return json(["code"=>200,"msg"=>'设置成功',"cityName"=>$userinfo['city_name'],'statusname'=>$statusname,'cid'=>$isinfo]);
}else{
return blackerror("设置失败");
}
}
onedit_city_new_del删除按钮：
public function onedit_city_new_del(){
$data = input();
$info = new Shopcity();
$isinfo = $info->where(['id'=>$data['cid']])->delete();
$cid = 0;
if ($isinfo){
return blacksuccess('删除成功');
}else{
return blackerror("删除失败");
}
}
