Я пытаюсь показать несколько выбранных значений в раскрывающемся списке из базы данных. Мой раскрывающийся список зависит от другого раскрывающегося списка.

Мой код JS:

var cityName = <?= json_encode($cityName); ?>;
var area_name = document.getElementById('area_name').value;
$.ajax({
  'url': '<?= base_url('utility/cityByArea'); ?>',
  'type': 'POST',
  'dataType': 'JSON',
  'data': {
    area_name : area_name
  },
  success: function(response) {
    $('#city_name').find('option').not(':first').remove();
    $.each(response, function(index, data) {
      for(var i = 0; i < cityName.length; i++) {
        $('#city_name').append('<option value="' +data['city_id_primary']+ '" ' +(cityName[i] == data['city_id_primary'] ? 'selected' : '')+ '>' +data['city_name']+ '</option>');
      }
    });
  }
});

Я получаю правильные выбранные значения в раскрывающемся списке, но значения в списке повторяются.

Я получаю значение базы данных, используя код php codeigniter var cityName = <?= json_encode($cityName); ?>; в виде массива.

enter image description here

Это выход console.log(cityName);.

enter image description here

Я получаю вывод в раскрывающемся списке.

Необходимо показать единичные значения.

Любая помощь приветствуется, заранее спасибо.

0
Ganesh Aher 23 Окт 2018 в 07:15

2 ответа

Лучший ответ

Прямо сейчас ваш код выводит каждый город cityName.length раз, потому что вы выполняете операцию append () внутри обоих ваших циклов.

Если вы хотите установить несколько вариантов, выбранных на основе того, что находится в списке названий городов, то все, что вам нужно сделать, - это разделить бит, в котором вы проверяете совпадение в списке cityName, от бита, в котором вы добавляете параметр в раскрывающийся список.

Логика довольно проста:

success: function(response) {
    $('#city_name').find('option').not(':first').remove();

    //loop through each possible option
    $.each(response, function(index, data) {
      var selected = false; //boolean variable to store whether the option value matches any existing city, or not
      //loop through the existing cities
      for(var i = 0; i < cityName.length; i++) {
        if (cityName[i] == data['city_id_primary']) {
          selected = true; //we have a match
          break; //no need to carry on checking, so stop the loop
        }
      }

      //now append the option to the dropdown (once!) and set its selected attribute according to the value of the "selected" boolean.
      $('#city_name').append('<option value="' +data['city_id_primary']+ '" ' +(selected === true ? 'selected' : '')+ '>' +data['city_name']+ '</option>');
    });
  }

Постскриптум Вероятно, есть «более аккуратный» способ написать это с использованием некоторых функций массива jQuery, но это самый простой вариант для понимания.

1
ADyson 23 Окт 2018 в 07:44

Измените логику 2 каждой функции:

for (var i = 0; i < cityName.length; i++) {
    $.each(response, function (index, data) {
        $('#city_name').append('<option value="' + data['city_id_primary'] + '" ' + (cityName[i] == data['city_id_primary'] ? ' selected ' : '') + '>' + data['city_name'] + '</option>');
    });
}
-2
hoangdv 23 Окт 2018 в 04:30
52941097