Этот ответ одновременно удаляет и повторно добавляет выбранные элементы (убедитесь, что все ответы соответствуют обоим) .
Это так добавив класс hidden - не удаляя опцию SELECT - упростив простую отмену скрытия опции, если строка удалена.
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cate + '")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
$("#amt5").val(null);
}
}
$("#month option:selected").addClass('hidden'); //<===== Added
let nextMonth = $("#month option:selected").next('option').text(); //<===== Added
$('#month').val(nextMonth);
}
function deleteval(z, a) {
// Find and remove selected table rows
$("#" + z + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
let mnth = $(this).parents("tr").find('td:nth-child(2)').text(); // HERE
$(this).parents("tr").remove();
$('select option').each(function(){ //<================ HERE
if ( $(this).val() === mnth ){
$(this).removeClass('hidden');
}
});
}
});
$("#" + a + "" + " tbody").find('input[name="record"]').each(function () {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
}
.hidden{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3> Montly Sales </h3>
<select id="month">
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MARCH">MARCH</option>
<option value="APRIL">APRIL</option>
<option value="MAY">MAY</option>
<option value="JUNE">JUNE</option>
<option value="JULY">JULY</option>
<option value="AUGUST">AUGUST</option>
</select>
<input type="number" id="amt5" placeholder ="Enter amount"/>
<input type="button" value="Add Row" onclick="ftm2add5()">
<button type="button" class="btn-danger" id = "delete" onclick="deleteval('table5')" >Delete Rows</button>
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th>Select</th>
<th>Month</th>
<th>T/O Value</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
ОБНОВЛЕНИЕ:
В запросе на комментарий обновлено, чтобы в раскрывающемся списке отображался также «следующий» месяц когда строка добавлена. Есть еще кое-что, что я оставлю в качестве упражнения для ФП. Что произойдет, если пользователь выберет последний месяц? Код не может справиться с этим. Вот как это решить:
Прежде чем получить «следующий» месяц, сначала получите название выбранного месяца (почти такой же код, просто проще).
Затем сравните это с текстом последнего элемента в раскрывающемся меню (начните с жесткого кодирования его до «АВГУСТ», затем, когда у вас это получится, подумайте, что программно)
Если выбранный месяц равен фамилии в раскрывающемся списке, установите в раскрывающемся списке первый параметр (точно такой же, как в моем коде).
Боннский шанс!