Selasa, 02 Juni 2020

Menambahkan option(data) pada input select jika tidak tersedia (Web - HTML)



Kadang pada saat tertentu kita ingin edit data dari table , maka setelah klik edit data pada table akan ditampilkan pada input form , nah jika kebetulan data berupa pilihan pada combobox (select) dan data tidak tersedia maka input select akan menampilkan data default atau bahkan mungkin blank, jika keadaan ini tidak kita sadari kemudian save maka data akan berubah (padahal data tersebut bukan yg kita maksud) ini menjadi bug dalam sebuah aplikasi.

Berikut ini flowchart cara memperbaikinya :

1.pilih data kemudian klik tombol Edit
2.data yg dipilih diload pada form
3.jika input berupa combobox(select) maka cek apakah data yg diload ada dalam pilihan (option)
4.jika data tidak tersedia maka tambahkan data pada input combobox(select)
5.load data ke combobox

Javascript , cek apakah data tersedia pada input select
function option_exists(select_id,option_text)
{
for (i = 0; i < document.getElementById(select_id).length; ++i)
{if (document.getElementById(select_id).options[i].value == option_text) {return true;}}
return false;
}



Javascript , cara menambahkan data baru pada input select
function add_option(select_id,option_text)
{
var x = document.getElementById(select_id);
var option = document.createElement("option");
option.text = option_text;
x.add(option);
}


Javascript , cara set value (load data) pada input select
document.getElementById(‘select_id’).value=’data yg diload’;