how to get a data-attribute (like:- data-phone ) value from the selected datalist option which is selected; It send me just value not data attribute.
i want to set data-phone of input from data-phone of datalist > option
How can I set this? Help
Html:
<input type="text" name="patirnt_name" id="patirnt_name" list="patient_list" onfocus="getAllPatients()" value="" data-phone="">
<datalist id="patient_list">
</datalist>
JQuery:
function getAllPatients() {
let url = "{{ route('get-all-patient-ajax') }}";
let list = $('#patient_list');
let html = '';
$.ajax({
url: url,
type: "GET",
success: function(res) {
let data = res.patients;
$.each(data, function(index, value) {
html +=
`<option value="${value.F_name}" data-phone="${value.phone}" >${value.F_name}</option >`;
});
list.html(html);
},
error: function(error) {
console.log(error);
}
})
}
As far as I understand, when you list.html(html) all the options are displayed in the DOM without the data-phone="${value.phone}" that you set in the each loop. You could try this:
$.each(data, function(index, value) {
$('<option/>', {
value : value.F_name,
data-phone : value.phone
}).text(value.F_name).appendTo(list);
});