我如何从期权中获得价值？

时间：2019-07-16 02:17:02

标签： javascript jquery ajax

我想从选项框中获取值并做一个附加操作，以便使装备侧面选项框的循环将使var end从var startkiri开始，而startkiri是idTahunBerlaku的值。但是我没有从中获得价值

var startkiri = $('#idTahunBerlaku option:selected').val()
var start = 2010;
var end = 2030;
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 start = 2010;
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 = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
  options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlakuS").insertAdjacentHTML(
  "beforeend", options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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">Batal</button>
          <button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>
        </div>
      </div>
    </div>
  </div>
</form>

那是我一直在工作的代码，但是当我应用它时，选项框将不会显示。

1 个答案:

答案 0 :(得分：0)

在设置startkiri并将选项添加到#idTahunBerlakuS之前，您必须等待用户从菜单中选择某些内容。

另外，使用parseInt()，否则startkiri + 10将进行串联而不是加法，并且您将得到类似end = 201500的内容。

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

var startkiri = $('#idTahunBerlaku option:selected').val()
var start = 2010;
var end = 2030;
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 start = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
  options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlakuS").insertAdjacentHTML(
  "beforeend", options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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">Batal</button>
          <button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>
        </div>
      </div>
    </div>
  </div>
</form>

相关问题
最新问题