#javascript #php #jquery #ajax #bootstrap-selectpicker
Вопрос:
Я использую плагин Selectpicker в своем текущем веб — проекте. Я также использую Codeigniter 4 в качестве веб-фреймворка.
Объяснение ситуации: Сначала я загружаю параметры выбора для поля выбора из базы данных. Затем Ajax-запрос выполняется нажатием кнопки. Полученный ответ json содержит значения, которые необходимо выбрать для параметров выбора.
Проблема: Параметры выбора выбраны соответствующим образом в соответствии со значением в ответе json (рядом с параметрами есть галочка), но они не отображаются в кнопке, поэтому заголовок кнопки не обновляется.
Пример: Для поля «номер сотрудника» из базы данных загружаются параметры «1234» и «5678». После нажатия на кнопку выполняется запрос Ajax, и результатом для поля «staff_number» является «1234». Затем этот параметр выбирается в поле Выбрать. Поэтому, когда вы нажимаете на него, рядом с опцией появляется галочка (см. рисунок 1). Эта опция появляется, но не в названии кнопки, так как на ней по-прежнему написано «Пожалуйста, выберите» (см. рисунок 2).
Рисунок 1:
выберите опцию
Рисунок 2:
пустой заголовок кнопки
Мой текущий код представления выглядит следующим образом:
<label for="staff_number">Staff number:*</label><br>
<select class="selectpicker" id="staff_number" multiple name="staff_number[]" title="Please select">
<?php foreach($staff_numbers as $each):?>
<option value="<?=$each?>" <?php echo set_select('staff_number',$each, ( !empty($data) amp;amp; $data == $each ? TRUE : FALSE )); ?>> <?=$each?></option>
<?php endforeach;?>
</select>
Мой текущий вызов Ajax выглядит следующим образом:
$.ajax({
url: 'getInformation.php',
type: 'POST',
data: {field : 'id', value: id.substring(4)},
success: function(data) {
//JSON needs to be parsed to be accessible in JS
var json = JSON.parse(data);
//Asign values to input fields
var staff_number= json['staff_number'];
$.each(staff_number.split(","), function(i,e){
$("#staff_number option[value='" e "']").prop("selected", true);
});
//$('.selectpicker').selectpicker('render');
//$('.selectpicker').selectpicker('refresh');
});
Я был бы признателен за любые предложения. 🙂
С наилучшими пожеланиями швалак
Ответ №1:
Сначала вам нужно отменить выбор всех выбранных параметров, и вам нужно обновить выбор после выбора, как показано ниже:
$.ajax({
url: 'getInformation.php',
type: 'POST',
data: {field : 'id', value: id.substring(4)},
success: function(data) {
//JSON needs to be parsed to be accessible in JS
var json = JSON.parse(data);
//deselect all option first
$("#staff_number option:selected").removeAttr("selected");
//Asign values to input fields
var staff_number= json['staff_number'];
$.each(staff_number.split(","), function(i,e){
$("#staff_number option[value='" e "']").prop("selected", true);
});
//$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
});
Комментарии:
1. Спасибо вам за такой подход. Однако проблема все еще существует. Примечание: Я снова скорректировал свой пост (добавил две фотографии).