LayUi-下拉框切换行级数据展示（通道切换）

本文链接：https://blog.csdn.net/qq_44198377/article/details/117216194

博客分享了如何优化通道切换功能的代码，通过减少代码量和避免重复，实现从A通道到B通道的值复制。在选择B通道时，如果未被占用，则将A通道的下拉框值和复选框值复制到B通道，并提示切换成功；若已被占用，则提示用户更换通道。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    前不久，接到需求需要做通道切换的功能，主要效果为：当在A通道的下拉框中，选择B通道，此时会将A通道中存在的值复制到B通道中。此时，B通道为A通道的替换通道。
   之前，曾上传一版较为复杂的代码，当时只想着效果实现，所以出现了代码量较大，代码重复的情况。最近又更新、优化了一版代码量少的通道切换代码。

form.on("select(Aisle)", function (data) {
                    var id = data.elem.id;
                    var obj = document.getElementById(id);

                    //第一层判断
                    //判断几通道要切换
                    switch (obj) {

                           case obj:
                                /*获取要切换到的通道名*/
                                var aisle = data.value;
                                console.log(aisle);
                                var digit = id.substr(-1, 1);
                                /*拼接切换通道的id*/
                                var prefix = "#";
                                var location = prefix.concat("Location", digit);
                                var grouping = prefix.concat("Grouping", digit);
                                var doubleQuote = '"';
                                var openoscillate = doubleQuote.concat("OpenOscillate", digit, doubleQuote);
                                var opencurrent = doubleQuote.concat("OpenCurrent", digit, doubleQuote);
                                //获取所选通道的值
                                //获取所选通道的下拉框值
                                var Location = jQuery(location).val();
                                var Grouping = jQuery(grouping).val();
                                //获取所选通道复选框的值
                                var AisleJudge = $('input[name=' + openoscillate + ']').prop("checked");
                                var ElectricityJudge = $('input[name=' + opencurrent + ']').prop("checked");
                                //第二层判断
                                //判断要切换到的通道
                                switch (aisle) {

                                       case aisle:
                                            //拼接下拉框的动态id
                                            var locaTion = prefix.concat("Location", aisle);
                                            var grouPing = prefix.concat("Grouping", aisle);
                                            //拼接复选框的动态id,用于赋值
                                            var Openoscillate = prefix.concat("OpenOscillate", aisle);
                                            var Opencurrent = prefix.concat("OpenCurrent", aisle);
                                            //拼接复选框的动态id,用于获取复选框的值，作用于下方的if判断
                                           var openOscillate = doubleQuote.concat("OpenOscillate", aisle, doubleQuote);
                                           var openCurrent = doubleQuote.concat("OpenCurrent", aisle, doubleQuote);

                                           /*console.log(openCurrent);*/
                                           //获取当前通道中的复选框值，用以判断是否被占用
                                           var openOscillates = $('input[name=' + openOscillate + ']').prop("checked");
                                           var openCurrents = $('input[name=' + openCurrent + ']').prop("checked");

                                                if (openOscillates == false && openCurrents == false) {
                                                    
                                                    //下拉框赋值
                                                    $(locaTion).val(Location);
                                                    $(grouPing).val(Grouping);
                                                    //复选框赋值
                                                    $(Openoscillate).prop("checked", AisleJudge);
                                                    $(Opencurrent).prop("checked", ElectricityJudge);
                                                    form.render();
                                                    layer.msg("切换通道完成，目前为" + aisle + "号通道");
                                                } else {
                                                    layer.msg("" + aisle + "号通道已被占用，请更换未被占用的通道！");
                                                }

                                        }
                                }

                            });