I have multiple Drop down list for Items, but my code only works for if I selected First selected item from drop down list, it is removed from second Drop down list.
If i selected second Drop down list, second selected item is removed in third drop down list but it appear first item in third drop down list.
I want to remove first and second selected item in third drop down list.
Also if i added fourth drop down list, first, second, and third item want to be removed from fourth item.
First selected "Frida 01 is in Third drop down list. I want to remove Frida and Rick in Third drop down list"
My code is below.
<tr id="tablerow0">
<td>
<select id="Gif0" name="store_Invs[0].Item_name" style="width: 180px; height: 30px;">
<option value="0">Frida 01</option>
<option value="1">Rick 01</option>
<option value="2">Ghost BLC1</option>
<option value="3">Sal T1</option>
<option value="4">Her 01</option>
</select>
</td>
</tr>
<button id="add" type="submit" class="btn btn-primary">Add</button>
<script type="text/javascript">
var counter = 1;
$(function () {
$('#add').click(function () {
$('<tr id="tablerow' + counter + '"><td>' +
'<select id = "Gif'+counter+'" name="store_Invs[' + counter + '].Item_name"
style="width: 180px;height: 30px;">
<option value="0">Frida 01</option>
<option value="1">Rick 01</option>
<option value="2">Ghost BLC1</option>
<option value="3">Sal T1</option>
<option value="4">Her 01</option>
</select>' +
'</td>'
'</tr>').appendTo('#submissionTable');
$('#Gif' + (counter-1) +' ' +'option:selected').each(function () {
var item = $(this).val();
$('#Gif' + counter+' ' +'option').each(function () {
var item1 = $(this).val();
if (item == item1) { $(this).remove(); }
}) // This code is for Removing item on current dropdown list from previous(-1)
'dropdown box selected. I want to remove all selected data when i create new drop down box
});
$("#Gif" + counter).chosen();
counter++;
return false;
});
});
