这周一开始没什么活可以给我，让我去给之前的亚马逊消息订阅系统添加了个增加订阅的功能，简单来说就是在通知类型页面上针对某个类型可以进行单个店铺区域的指定订阅，说起来其实不难。但是有个条件，它下拉列表要做成多选的，人麻了，完全不知道怎么写的那种，总之在九牛二虎之力下，这个问题算是勉强解决到了能用的程度。在这里总结一下。

简述

只能说公司的东西过于老掉牙，框架也用不上，就只能拿jQuery来实现了。用的是Select2的插件，在我用的adminlte里面是有集成这个，所以怎么集成我倒是没有研究。

这东西似乎和Bootstrap关系很大，得按照Bootstrap表单那一套来写，但是光说我也说不清楚，还是得上图。

大概是个这么个形式，但是还没完，需要做的还有添加相关的js语句。虽然目前我并不理解只是添加了两句话就会让显示发生这么大变化的原理。

$('#account').select2().val({!! json_encode(request()->get('account')) !!}).trigger('change');
        $('#area').select2().val({!! json_encode(request()->get('area')) !!}).trigger('change');
这一步做完了，做出的效果大概是下面这个样子：

![](https://cdn.jsdelivr.net/gh/meloveayu/blog_img@master/img/20211207162925.png)

简单来说就是点击显示下拉列表然后可以点击多选，重复点击取消选中。

最难的部分其实是取到框中有比较正常格式的值……我之前试着用text()来请求，然后就发现多选的各个值粘连成了一个字符串（可能用字符串解析的方法也能识别出来，但是很费脑子）。然后又试过用val()请求，但这样只能读到第一个值，之后多选的没了。只能说是痛苦。所幸在网上翻了很长时间发现了相关的请求方法，记录一下：

 javascript
function addSubscription() {
            let typeId = $("#typeid2").attr("value");
            let account = [];
            $("#account option:selected").each(function () {
                account.push($(this).val());
            });
            let area = [];
            $("#area option:selected").each(function () {
                area.push($(this).val());
            });
            let data = {
                '_token': "{{csrf_token()}}",
                'account': account,
                'area': area
            };
            $.ajax({
                url: '/notification/notification_type/add_sub/' + typeId,
                type: 'GET',
                data: data,
                success: function (result) {
                    if (result.code == 'SUCCESS') {
                        alertify.success("添加订阅成功,请稍侯");
                    } else {
                        alertify.error("添加订阅失败");
                    }
                }
            });
            return false;
        }

主要是获取account和area的数据，这一部分我是通过把选中的元素推到一个空数组里面实现的，可能会有更好的方法，但是目前我也就只想到了这种。

至于送到后端的事，就是做了一个组合，然后表内查找，存在推送队列云云……以下内容就不说了。

下次大概能好用一点？感觉写原生前端就是在坐牢。麻呀。