从附加的选择菜单中删除选择选项

Question

早上好 Stack Overflow，

这将是我的第一个问题，我还在学习编码，所以如果我太天真了，请原谅我。

我目前正在开发一种模式，当用户尝试从存储在多个位置的仓库中挑选一定数量的某种产品时，会显示该模式。

用户获得了一个请求的数量，下拉菜单显示了他们可以从中检索项目的每个可能的位置。然后，用户将使用选择菜单选择位置，然后根据他们想要从该位置获取的数量调整滑块。

但是，如果用户想要将请求的金额拆分到多个位置，他们将单击“选择另一个位置”按钮，并且包含选择菜单的另一行将直接显示在下方。用户将能够执行此操作，直到拣货总数达到请求数量或直到他们用完可供拣货的位置。我的问题是，我试图删除用户在单击“选择另一个位置”按钮之前选择的位置。

如您所见，相同的位置再次出现在附加菜单中。我想拥有它，所以它没有。结果对我来说非常困难，因为每个位置选择器都有一个由变量创建的唯一 ID，我发现通常很难将其实现到任何类型的条件中。

我在数量滑块上遇到了类似的问题，因为我试图单独处理每个滑块，但也作为一个整体做出贡献。无论如何，开始离开话题并闲逛。

我将在下面显示我认为可能有帮助的代码...

初始创建和声明的变量：

//Multiple Location PopUp Function
jQuery.LocPick = function LocPick(id){
//Function Post
$.post(base_url+"ts/TestedQtyMultiLoc/", { 
                                ID: id,
                                BatchID: $("#BatchID").val()},

//Calling variables to be displayed within the PopUp                                
function(data){
QtyReq = data.item.QtyRequested;
var code= data.item.ItemCode;
rowCount = $('#AddLocationPicker tr').length;
loc='';
$.each(data.Locations, function(i, value) {loc +='<option value="'+ value.Location + '">' + value.Location + ' -- Qty: ' +value.Qty +'</option>';
})
Picker=0;

这是我的模态的 HTML 内容的代码：

//PopUp Contents
$("#dialog-ProcessConfirm").html('<p>'+code+' has multiple locations<br><br>Please confirm which locations the item is to be picked from before continuing.</p><p><table id="AddLocationPicker"><tr><td></td><td>Location</td><td>Qty Picked</td></tr><tr id="' + Picker +'"><td></td><td><select class="selectbox" id="LocationPickerSelect'+ Picker +'"><option value="0">Please select a location'+loc+'</option></select></td><td><input class= "QtyPicker" id="AddLocQtyPick'+ Picker +'"type="number" min="1" max='+QtyReq+' value="1" onkeydown="return false"></td></tr></table><table><td></td><td>Quantity Requested:</td><td>'+QtyReq+'</td></table><table><td></td><td><input type="text" name="LocErr" id="LocErr" maxlength="50" size="50" tabstop="false" readonly="true" style="border:0px;color:#FF0000;" value=""><input type="text" name="QtyErr" id="QtyErr" maxlength="50" size="50" tabstop="false" readonly="true" style="border:0px;color:#FF0000;" value=""></td></table></p>');
}, "json");

“选择另一个位置按钮”：

//Buttons for the PopUp

buttons: { 

'Pick Another Location': function() { //Button to allow user to add another location to pick from

$('#AddLocQtyPick'+Picker).prop ('disabled', true); //Disables the current selection, so that it cannot be edited

$('#LocationPickerSelect'+ Picker).prop ('disabled', true);  //Disables the current selection, so that it cannot be edited

Picker++; //Adds Unique Number to the ID of the input fields

//For Loop that helps to total up the quantities being selected in each picker
total=0;
for (i = 0; i<Picker; i++) {
total= total + $('#AddLocQtyPick'+i).val() * 1.0;
}

QtyReqTot= QtyReq - total; //Variable decides max value of pick on appends using previous selection

附加内容：

//The Location/Quantity Picker that gets appended
var appendTxt = '<tr id="' + Picker + '"><td></td><td><select class= "selectbox" id="LocationPickerSelect'+ Picker +'"><option value="0">Please select a location'+loc+'</option></select></td><td><input class= "QtyPicker" id="AddLocQtyPick'+ Picker +'" type="number" min="1" max='+QtyReqTot+' value="1" onkeydown="return false"></td></tr>';

我不知道我是否可以在使用 For 循环时使用与位置选择器具有的递增 IDS 相同的技术，就像我使用数量滑块所做的那样，因为我看到了一些暗示这一点的示例而其他人则说在这种情况下永远不要使用循环。

我的主要问题归结为如何在一个独特的菜单中选择一个选项，然后从另一个具有相同选项的独特菜单中删除该选项。

我现在要感谢您收到的任何意见/建议以及对我能力的耐心！

编辑：问题已解决

我遇到的问题确实涉及在编写语法时尝试考虑唯一 ID。使用 for 循环的确认让我可以与我在汇总选择器数量时创建的上一个循环进行比较。

//For Loop that removes previously selected locations from the append
for (i = 0; i<Picker; i++) {
LocSelect= $('#LocationPickerSelect'+i).val();
$('#LocationPickerSelect'+Picker+' option[value="'+LocSelect+'"]').remove();
}

Answer 1

我会建议采用以下方法：

而不是简单地将所有<option> 添加到每个选择框，如下所示：

$.each(data.Locations, function(i, value) {loc +='<option value="'+ value.Location + '">' + value.Location + ' -- Qty: ' +value.Qty +'</option>';
})

去下面的代码检查;其中所有<option> 都已被最终用户选中。并且只添加以前未使用的那些。

var prevSelectedLoc = [];
if(Picker > 0)
{
    for(i=0;i<Picker;i++)
    {
        prevSelectedLoc.push($("select#LocationPickerSelect"+i).val());
    }
}
$.each(data.Locations, function(i, value) {
    if($.inArray(value.Location,prevSelectedLoc) == -1)
    {
        //if current option has not been previously selected then only add it to current select box
        loc +='<option value="'+ value.Location + '">' + value.Location + ' -- Qty: ' +value.Qty +'</option>';
    }
});

Answer 2

我遇到的问题确实涉及在编写语法时尝试考虑唯一 ID。确认使用 for 循环后，我可以与之前在汇总选择器数量时创建的循环进行比较。

//For Loop that removes previously selected locations from the append
for (i = 0; i<Picker; i++) {
LocSelect= $('#LocationPickerSelect'+i).val();
$('#LocationPickerSelect'+Picker+' option[value="'+LocSelect+'"]').remove();
}