问题
I try to populate a select form with data from a json file.
[{"matricola":"1", "nome":"aaaaa"},{"matricola":"2", "nome":"bbbbbb"}]
If I use select it works, if i try to use selectpicker I do not understand where I have to refresh the selectpicker in my javascript code.
Here my code:
<div class="form-group ">
<select id="cf" class="selectpicker show-tick form-control" data-dropup-auto="false" data-live-search="true" required="" name="cf">
</select>
</div>
<script>
let dropdown = document.getElementById('cf');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Seleziona un dipendente';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
const url = 'tables/griglia_dipendenti_incarichi.php';
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status === 200) {
const data = JSON.parse(request.responseText);
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].nome;
option.value = data[i].matricola;
if (i==0){
alert(option.text);
}
dropdown.add(option);
}
} else {
// Reached the server, but it returned an error
}
}
request.onerror = function() {
console.error('An error occurred fetching the JSON from ' + url);
};
request.send();
</script>
I have tried with
dropdown.add(option).selectpicker('refresh');
but it do no works
回答1:
Firstly you should read this guide - https://developer.snapappointments.com/bootstrap-select/ and check if you have linked all needed files to the page.
Next thing is to initialize Bootstrap-select plugin. You can do it for all select tags on the page:
$('select').selectpicker();
or just for your element:
$('#cf').selectpicker();
Now, if you change any select and want a user to see changes, you need to refresh selectpicker plugin.
If you use a new version of Bootstrap-select plugin, then try this:
$('#cf').selectpicker('refresh');
Otherwise use this:
$('#cf').selectpicker('destroy');
$('#cf').selectpicker();
p.s.: here's a simple exapmle - https://jsfiddle.net/Denisdude/pf7qreum/17/
回答2:
Many thanks. It works with fake data not with a online json
Here my javascript code:
<script>
$('#cf').selectpicker();
var Request = function () {
let dropdown = document.getElementById('cf');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Seleziona un dipendente';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
// data
const url = 'tables/griglia_dipendenti_incarichi.php';
const request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status === 200) {
const data = JSON.parse(request.responseText);
for (let i = 0; i < data.length; i++) {
let option;
option = document.createElement('option');
option.text = data[i].nome;
option.value = data[i].matricola;
/*if (i==0){
alert(option.text);
}*/
dropdown.add(option);
}
} else {
// Reached the server, but it returned an error
}
}
request.onerror = function() {
console.error('An error occurred fetching the JSON from ' + url);
};
request.send();
//alert('request has been sent!');
// here we refresh selectpicker plugin
//$('#cf').selectpicker('refresh');
// OR destroy and initialize it IF "refresh" didn't work
$('#cf').selectpicker('destroy');
$('#cf').selectpicker();
};
Request();
</script>
where is my last error?
来源:https://stackoverflow.com/questions/58248613/problem-with-sintax-of-selectpickerrefresh