Я пытаюсь показать несколько выбранных значений в раскрывающемся списке из базы данных. Мой раскрывающийся список зависит от другого раскрывающегося списка.
Мой код 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); ?>; в виде массива.
Это выход console.log(cityName);.
Я получаю вывод в раскрывающемся списке.
Необходимо показать единичные значения.
Любая помощь приветствуется, заранее спасибо.
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, но это самый простой вариант для понимания.
Измените логику 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>');
});
}