I use Select 2 in my form where the option data in it I take from the database and I also add an "add new" button when the searched keyword is not in the database. what I want to ask is, what kind of way can I do to be able to create an action from the button. for example when the button is clicked I can display a text field.
For illustration, here is my code:
$('#add_penilai').select2({
placeholder: 'Change Name',
tags : true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append(`<button type="button"
class="btn btn-secondary btn-sm ml-10"
onClick='Show()'> + Add New Item</button>`);
}
return $result;
},
escapeMarkup: function (markup) {
return markup;
}
});
.form-control.form-control-hide {
display: none;
}
<select class="form-control select2" id="add_penilai" name="nama_penilai" onchange="isi_otomatis()" data-width="100%">
<option value="Jhony">Jhony</option>
<option value="Kyra">Kyra</option>
<option value="Ronald">Ronald</option>
</select>
<input class="form-control form-control-hide" type="text" id="divisi" name="nama_instansi" />