How can I get value from option?

Question

I wanted to get the value from the option box and do an addition so the loop for the rigt side option box gonna the var end will started from var startkiri which is the value from idTahunBerlaku. But i'm not getting the value from it

 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>

That's the code i've been working but when i applied it , the option box won't show.

Answer 1

You have to wait for the user to select something from the menu before setting startkiri and adding the options to #idTahunBerlakuS .

Also, use parseInt() , otherwise startkiri + 10 will do concatenation instead of addition, and you'll have something like 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>