javascript - 如何使选择选项值每次更改其值时都重新开始？

Question

我一直在制作两个选择选项框。哪个有效，第一个范围是 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>

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

希望这有帮助