每次更改其值时，如何使选择选项值重新开始？答案

【问题标题】：How make select option value start over everytime changing its value?每次更改其值时，如何使选择选项值重新开始？
【发布时间】：2019-12-02 02:54:00
【问题描述】：

我一直在制作 2 选择选项框。哪个有效，第一个介于 2010-2019 年之间。第二个，我希望它从第一个选择选项框的值开始，其范围为 +10 年。

是的，它确实有效！但问题是，如果我做了我的第一个选择，它就起作用了。然后，当我更改第一个选项框的值时，它给了我另一个循环。例如：我选择的第一个选项框：2011 第二个选项框的值为：2011, 2012, 2013, 2014, .. ,2021。

然后我点击第一个选项框是：2012 第二个选项框的值为：2011,2012,2013,2014,..,2021,2012,2013,2014,2015,..,2022。

这是我制作的代码。

<script>
/* 	NILAI TAHUN BERLAKU SAMPAI BERDASAR TAHUN BERLAKU MULAI */
		$("#idTahunBerlaku").change(
				function() {
					var startkiri = parseInt($(this).val());
					var start = startkiri;
					var end = startkiri + 10;
					var options = "";
					for (var year = start; year <= end; year++) {
						options += "<option>" + year + "</option>";
					}
					document.getElementById("idTahunBerlakuS")
							.insertAdjacentHTML("beforeend", options);
				});
		
		var start = 2010;
		var end = 2019;
		var options = "";
		for (var year = start; year <= end; year++) {
			options += "<option>" + year + "</option>";
		}
		document.getElementById("idTahunBerlaku").insertAdjacentHTML(
				"beforeend", options);

		var start = 1;
		var end = 12;
		var options = "";
		for (var month = start; month <= end; month++) {
			options += "<option>" + month + "</option>";
		}
		document.getElementById("idBulanBerlaku").insertAdjacentHTML(
				"beforeend", options);

		var startkiri = $('#idTahunBerlaku :selected').val();

		var start = 1;
		var end = 12;
		var options = "";
		for (var month = start; month <= end; month++) {
			options += "<option>" + month + "</option>";
		}
		document.getElementById("idBulanBerlakuS").insertAdjacentHTML(
				"beforeend", options);
		
		$('#idBtnSimpanSimpan')
				.click(
						function() {
							if ($('#idPenerbit').val().trim() == ""
									|| $('#idtrainingName').val().trim() == "") {
								alert("ISI SEMUA FORM TERLEBIH DAHULU");
							} else {
								if ($('#idTahunBerlaku').val() > $(
										'#idTahunBerlakuS').val()) {
									alert("TAHUN BERLAKU MULAI TIDAK BOLEH LEBIH KECIL DARI BERLAKU SAMPAI");
								} else {
									debugger;
									$("input, textarea").each(function(){
										  $(this).val(jQuery.trim($(this).val()));
									});
									var vDatasertifikasi = $(
											'#idFrmAddSertifikasi').serialize();
									alert(vDatasertifikasi);
									debugger;
									$
											.ajax({
												url : '/savesertifikasi',
												type : 'POST',
												data : vDatasertifikasi,
												dataType : "json",

												success : function(model) {
													debugger;
													if (model.status == "berhasil") {
														alert("Data berhasil disimpan");
														$(
																'#idMdlNewSertifikasi')
																.modal('hide');

														
														window.location = './sertifikasi'
														debugger;

													} else {
														alert("Data salah");
													}
												},
												error : function(model) {
													debugger;
												}
											});
								}
							}
						});

		// 		DISABLE PILIHAN
		$(".clSelectKiri").change(function() {
			if ($('#idTahunBerlaku').val() && $('#idBulanBerlaku').val()) {
				$(".clTgglKanan").removeAttr("disabled");
			} else {
				$(".clTgglKanan").attr("disabled", "disabled");
			}
		}).trigger("change");
	</script>

<form class="form-horizontal" id="idFrmAddSertifikasi" method="post">
		<div class="row">
			<div class="col-sm-12">
				<div class="row">
					<!-- LEVEL 1 / KIRI -->
					<div class="col-xs-8 col-sm-6">
						<div class="col-xs-12">
							<label for="SertifikasiName" class="control-label">Nama
								Sertifikasi<sup>*</sup>
							</label>
							<div class="form-group">
								<div class="col-sm-12">
									<input type="text" class="form-control clborderbiru"
										maxlength="50" id="idtrainingName" name="certificate_name"
										placeholder="" title="MAKS. KARAKTER 50">
								</div>
							</div>
						</div>
						<div class="col-xs-12 col-sm-12">
							<label for="schoolName" class="control-label">Berlaku
								Mulai</label>
							<div class="row">
								<div class="col-xs-8 col-sm-6">
									<div class="form-group">
										<div class="col-sm-12">
											<select class="form-control clborderbiru clSelectKiri"
												id="idBulanBerlaku" name="valid_start_month">
												<option value="0" disabled selected hidden>- Pilih
													Bulan -</option>
											</select>
										</div>
									</div>
								</div>
								<div class="col-xs-4 col-sm-6">
									<div class="form-group">

										<div class="col-sm-12">
											<select class="form-control clborderbiru clSelectKiri"
												id="idTahunBerlaku" name="valid_start_year">
												<option value="0" disabled selected hidden>- Pilih
													Tahun -</option>
											</select>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>

					<!-- LEVEL 2 / KANAN -->
					<div class="col-xs-4 col-sm-6">

						<div class="col-xs-12">
							<label for="organizer" class="control-label">Penerbit<sup>*</sup></label>
							<div class="form-group">
								<div class="col-sm-12">
									<input type="text" class="form-control clborderbiru"
										id="idPenerbit" name="publisher" placeholder="">
								</div>
							</div>
						</div>

						<div class="col-xs-12 col-sm-12">
							<label for="schoolName" class="control-label">Berlaku
								Sampai</label>
							<div class="row">
								<div class="col-xs-8 col-sm-6">
									<div class="form-group">
										<div class="col-sm-12">
											<select class="form-control clTgglKanan clborderbiru"
												id="idBulanBerlakuS" name="until_month">
												<option value="" disabled selected hidden>- Pilih
													Bulan -</option>
											</select>
										</div>
									</div>
								</div>
								<div class="col-xs-4 col-sm-6">
									<div class="form-group">

										<div class="col-sm-12">
											<select class="form-control clTgglKanan clborderbiru"
												id="idTahunBerlakuS" name="until_year">
												<option value="" disabled selected hidden>- Pilih
													Tahun -</option>
											</select>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="col-xs-12">
					<label for="notes" class="control-label">Catatan</label>
					<div class="form-group">
						<div class="col-sm-12">
							<textarea class="form-control clborderbiru" id="idCatatan"
								rows="6" name="notes"></textarea>
						</div>
					</div>
				</div>
				<div class="col-md-offset-10">
					<div class="btn-group">
						<button type="button" class="btn clBtnMdl" data-dismiss="modal">Batal</button>
						<button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>
					</div>
				</div>
			</div>
		</div>
	</form>

【问题讨论】：

标签： javascript jquery web

【解决方案1】：

修改数据前必须清除select的内容。

insertAdjacentHTML 只是在指定位置插入 DOM。因此，您必须在添加修改之前清除现有元素。

$("#idTahunBerlaku").change(
            function() {
                var startkiri = parseInt($(this).val());
                var start = startkiri;
                var end = startkiri + 10;
                var options = "";
                for (var year = start; year <= end; year++) {
                    options += "<option>" + year + "</option>";
                }
                //Empties existing options.
                $("#idTahunBerlakuS").empty();
                //Appends '- Pilih Bulan -'. You can ignore this if you don't need it.
                $('#idTahunBerlakuS').append($("<option></option>").attr("value",'').text('- Pilih Bulan -'));
                document.getElementById("idTahunBerlakuS").insertAdjacentHTML("beforeend", options);
            });

希望对你有帮助

【讨论】：

好的，从我从你的代码中看到的，我只需要在我的代码中添加那个空语法。所以我在循环中添加了空白。从您的代码中，我的占位符成为一个选项而不是隐藏，顺便说一句，非常感谢您的帮助:)
您不必从循环内部调用它。调用它一次将清除所有元素。

【解决方案2】：

好吧，从我之前说过的评论来看，我只是在循环中添加了一点东西，而没有改变任何东西。这是可行的，它并没有使我的“占位符”成为一种选择。

$("#idTahunBerlaku").change(
				function() {
					var startkiri = parseInt($(this).val());
					var start = startkiri;
					var end = startkiri + 10;
					var options = "";
					for (var year = start; year <= end; year++) {
						options += "<option>" + year + "</option>";
						 $("#idTahunBerlakuS").empty();
					}
					document.getElementById("idTahunBerlakuS")
							.insertAdjacentHTML("beforeend", options);
				});

【讨论】：