javascript - 添加后，从下拉菜单中删除一个值并显示下一个值，删除后，再次将删除的值添加到下拉菜单中

Question

目前，我正在使用以下过程使用下拉菜单和文本框将月份和值添加到表中。我的要求是，添加数据后，从下拉菜单中删除该月份并向用户显示列表中的下一个相应月份。此外，如果记录被删除，也将删除的值重新添加到下拉菜单中。用户需要在表中勾选需要删除的记录。

数据插入方法

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);
    }
  }
}


function deleteval(z, a) {

  // Find and remove selected table rows

  $("#" + z + "" + " tbody").find('input[name="record"]').each(function() {
    if ($(this).is(":checked")) {
      $(this).parents("tr").remove();
    }
  });


  $("#" + a + "" + " tbody").find('input[name="record"]').each(function() {
    if ($(this).is(":checked")) {
      $(this).parents("tr").remove();
    }
  });


}

<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>

Answer 1

此答案会删除并重新添加所点击的项目(确保所有答案都执行这两项操作)。

它是通过添加一个 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>

---

更新:

根据评论请求，更新为在添加行时还在下拉列表中显示“下一个”月份。还有一件事要做，我将其作为 OP 的练习。如果用户选择最后一个月会发生什么？代码无法处理它。解决方法如下:

1. 在获取“下一个”月份之前，首先获取选定的月份名称(几乎相同的代码，只是更简单)。

2. 然后将其与下拉列表中最后一项的文本进行比较(首先将其硬编码为“AUGUST”，然后当您开始工作时，以编程方式计算出来)

3. 如果所选月份等于下拉列表中的姓氏，请将下拉列表设置为第一个选项(与我的代码中的方法完全相同)。

好机会!