추가 된 선택 메뉴에서 선택 옵션 제거

좋은 아침 스택 오버플로,

이것이 나의 첫 번째 질문이 될 것이고 나는 여전히 코딩을 배우고 있으므로 내가 순진하다면 나를 용서하십시오.

저는 현재 여러 위치에 보관 된 창고에서 특정 제품의 수량을 선택하려고 할 때 사용자에게 표시되는 모달을 작업 중입니다.

사용자에게 요청 된 수량이 제공되고 드롭 다운 메뉴에 항목을 검색 할 수있는 각 가능한 위치가 표시됩니다. 그런 다음 사용자는 선택 메뉴를 사용하여 위치를 선택한 다음 해당 위치에서 가져 오려는 양으로 슬라이더를 조정합니다.

그러나 사용자가 요청 된 금액을 여러 위치로 분할하려는 경우 "다른 위치 선택"버튼을 클릭하면 선택 메뉴가 포함 된 다른 행이 바로 아래에 나타납니다. 사용자는 피킹 된 총량이 요청 된 수량에 도달하거나 피킹 할 위치가 부족할 때까지이 작업을 수행 할 수 있습니다. 내 문제는 "다른 위치 선택"버튼을 클릭하기 전에 사용자가 선택한 위치를 제거하려고한다는 것입니다.

보시다시피 동일한 위치가 추가 된 메뉴에 다시 나타납니다. 나는 그것을 가지고 싶어서 그렇게하지 않습니다. 각 위치 선택기에는 변수로 생성 된 고유 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를 사용하여 위치 선택기가 갖는 증분 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();
}