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

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 Loops来使用Location Picker所具有的递增IDS，就像我使用Quantity滑块一样，因为我看到一些示例提示这个而其他人则说在这种情况下从不使用循环。

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

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

编辑：解决了问题

我遇到的问题涉及在编写语法时尝试考虑唯一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循环允许我与我在累计拾取器数量时创建的先前循环进行比较。

file1="Inbox/"