Javascript 拆下'；加上「；列表中的值

所以我有6行多列表字段。当用户选择一个值并单击“添加”时，该值将移动到“添加”列表中，并从“删除”列表中删除

但是，假设所有行都有相同的值，如果用户从第1行的“添加”框中选择一个值，我希望它也从第2、3、4、5、6行的“添加”框中删除

这很难解释，所以，来吧：

$（）.ready（函数（）{
$（'#添加'）。单击（函数（）{
return！$（“#select1选项：selected”）.remove（）.appendTo（“#select2”）；
});  
$（“#删除”）。单击（函数（）{
return！$（“#select2选项：selected”）.remove（）.appendTo（“#select1”）；
});  
});
$（）.ready（函数（）{
$（'#add2'）。单击（函数（）{
return！$（“#select3选项：selected”）.remove（）.appendTo（“#select4”）；
});  
$（'#remove2'）。单击（函数（）{
return！$（“#select4选项：selected”）.remove（）.appendTo（“#select3”）；
});  
}); 
$（）.ready（函数（）{
$（'#add3'）。单击（函数（）{
return！$（'#select5选项：selected'）.remove（）.appendTo（'#select6'）；
});  
$（'#remove3'）。单击（函数（）{
return！$（“#select6选项：selected”）.remove（）.appendTo（“#select5”）；
});  
}); 
$（）.ready（函数（）{
$（'#add4'）。单击（函数（）{
return！$（“#select7选项：selected”）.remove（）.appendTo（“#select8”）；
});  
$（'#remove3'）。单击（函数（）{
return！$（'#select8选项：selected'）.remove（）.appendTo（'#select7'）；
});  
}); 
$（）.ready（函数（）{
$（'#add5'）。单击（函数（）{
return！$（“#select9选项：selected”）.remove（）.appendTo（“#select10”）；
});  
$（'#remove5'）。单击（函数（）{
return！$（“#select9选项：selected”）.remove（）.appendTo（“#select10”）；
});  
}); 
$（）.ready（函数（）{
$（'#add6'）。单击（函数（）{
return！$（“#select11选项：selected”）.remove（）.appendTo（“#select12”）；
});  
$（'#remove6'）。单击（函数（）{
return！$（“#select12选项：selected”）.remove（）.appendTo（“#select11”）；
});  
}); 

加班联系人

处置




不适用-没有回答


W-工作


R-拒绝


S-学校

MTFD仅批准



Acc-接受


DNC-未呼叫

您应该考虑以更动态的方式编写代码。不要为每个“添加”和“删除”链接编写单独的事件处理程序，而是在页面类上指定元素，并在类级别上一般地处理逻辑

例如，我建议给你的左侧

select

s一类“源”，给你的右侧

select

s一类“目的”。给类“添加”和“删除”添加/删除链接。要保留排序，只需在DocumentReady上存储一个排序索引，每次重新填充源时，根据存储的索引进行排序

我创建了事件处理程序，并对保存/还原代码进行了排序

$(function() {

    //store a sort index for each option item
    $(".source").each(function() {
        $(this).find("option").each(function(index) {
            $(this).data("sortIndex", index);
        });
    });

    $(".add").on("click", function(e) {
        e.preventDefault();
        var that = $(this);
        var destination = that.closest(".calloutForm").find(".destination");
        var options = that.closest(".calloutForm").find(".source").find("option:selected");

        //move selected options
        options.detach().appendTo(destination);

        //remove from other sources
        $(".source").find("option").filter(function(index, element) {
            return options.filter('[value="' + element.value + '"]').length;
        }).remove();
    });

    $(".remove").on("click", function(e) {
        e.preventDefault();

        //remove from current destination and append to all sources
        $(this).closest(".calloutForm").find(".destination").find("option:selected").detach().appendTo(".source");

        //sort options by stored index
        $(".source").each(function() {
            var options = $(this).find("option").detach();
            $(this).append(options.toArray().sort(function(a, b) {
                return $(a).data("sortIndex") > $(b).data("sortIndex");
            }));
        });
    });             
});

您可以在下面的代码段中看到完整的运行示例

$（函数（）{
//为每个选项项存储排序索引
$（“.source”）.each（函数（）{
$（此）.find（“选项”）.each（函数（索引）{
$（此）.data（“sortIndex”，索引）；
});
});
$（“.add”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var，该值=$（此值）；
var destination=最近的（“.callout表单”）.find（“.destination”）；
var options=that.closest（“.calloutForm”）.find（“.source”）.find（“option:selected”）；
//移动选定选项
options.detach（）.appendTo（目标）；
//从其他来源删除
$（“.source”）.find（“option”）.filter（函数（索引，元素）{
返回选项.filter（'[value=“'+element.value+'“]'）。长度；
}).remove（）；
});
$（“.remove”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
//从当前目标删除并附加到所有源
$（this）.closest（“.calloutForm”）.find（“.destination”）.find（“.option:selected”）.detach（）.appendTo（.source”）；
//按存储索引对选项排序
$（“.source”）.each（函数（）{
var options=$（this.find（“option”）.detach（）；
$（this）.append（options.toArray（）.sort（函数a，b）{
返回$（a）.data（“sortIndex”）>$（b）.data（“sortIndex”）；
}));
});
});				
});

不适用-没有回答
选择1
选择2
选择3
选择4
选择5
W-W