JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<select name='masa'>
<option value=''>--Sila Pilih--</option>
  <option value='10:02' data-val1='{"v1":"Pagi","d1":"AM"}' data-val2='{"v1":"Malam","d1":"PM"}'>10:20</option>
  <option value='12:21' data-val1='{"v1":"Tengah Hari","d1":"PM"}' data-val2='{"v1":"Tengah Malam","d1":"AM"}'>12:21</option>
  <option value='02:30' data-val1='{"v1":"Pagi","d1":"AM"}' data-val2='{"v1":"Petang","d1":"PM"}'>02:30</option>
</select>

<select name='waktu' data-selected='PM'> <!-- Tukar selected ke ='AM' @ ='' ikut data kemaskini-->
<option value=''>--Sila Pilih Masa--</option>
</select>

JavaScript

$("[name='masa']").on('change',function(){
  
  $("[name='waktu']").empty();
  
  if($(this).val()!==''){
    var v1 = $("option:selected",this).data("val1").v1;
    var d1 = $("option:selected",this).data("val1").d1;
    var v2 = $("option:selected",this).data("val2").v1;
    var d2 = $("option:selected",this).data("val2").d1;
    $("[name='waktu']")
    .append("<option value=''>--Sila Pilih--</option>")
    .append("<option value='"+d1+"'>"+v1+"</option>")
    .append("<option value='"+d2+"'>"+v2+"</option>")
    .val($("[name='waktu']").data('selected'));
  }else{
    $("[name='waktu']")
    .append("<option value=''>--Sila Pilih Masa--</option>");
  }
  
});

$("[name='masa']").trigger('change');