Selectpicker — выбранная опция не отображается в кнопке

#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. Спасибо вам за такой подход. Однако проблема все еще существует. Примечание: Я снова скорректировал свой пост (добавил две фотографии).