如何从其他下拉列表中删除在上一个下拉列表中选择的选项

Question

Thanks in advance for any reply. I now have a web page from where you can place orders. In this web page, you can select a "product A" from a drop down list. Once a "product A" is selected, an event is triggered, resulting in another drop down list. Now I want that "product A" will not show in the second drop down list. Here is the code.

<table style="margin: 0px auto;width: 700px" id="shopTable">
<tr>
<td>
<select name="product" class="product" style="width: 250px" onchange='onchangeprod(this);' >
<c:forEach var="pro" items="${product}">
<option value="${pro.id}" data-price="${pro.price}">${pro.name}(&#8364;${pro.price})</option>
</c:forEach>
</select>
</td>
</tr>

The script is as follows.

function onchangeprod(row){
       var test ="<tr>"
                 +"<td>"
                 +"<select name='product' class='product' style='width: 250px' onchange='onchangeprod(this);'>"
                        +"<c:forEach var='pro' items='${product}'>"
                            +"<option value='${pro.id}' data-price='${pro.price}'>${pro.name}(&#8364; ${pro.price})</option>"
                        +"</c:forEach>"    
                 +"</select>"
                 +"</td>"
                 +"</tr>";
    $("#applyTable").append(test);
    }   <tbody id="applyTable"></tbody>

Answer 1

Supose your previous object id is stored in variable named prevId then use a if statement in your template to check for that id and print <option> only for objects with different id

function onchangeprod(row){
   var test ="<tr>"
             +"<td>"
             +"<select name='product' class='product' style='width: 250px' onchange='onchangeprod(this);'>"
              <c:forEach var='pro' items='${product}'>
                   <c:if test="${pro.id!=prevId}">
               +"<option value='${pro.id}' data-price='${pro.price}'>${pro.name}(&#8364; ${pro.price})</option>"
                   </c:if>
              </c:forEach>  
             +"</select>"
             +"</td>"
             +"</tr>";
$("#applyTable").append(test);
}   <tbody id="applyTable"></tbody>