Я знаю, что это может быть простой проблемой для многих, но я стою на месте и не обладаю навыками для выполнения этой задачи. Я нигде не смог найти работающего ответа в Интернете ни в одном из моих исследований. У меня есть несколько групп зависимых выпадающих списков / опций (по три на группу), которые загружаются через сервер ajax. Первый выпадающий в каждой группе функций. Однако второй и третий нет. У меня есть две (2) проблемы. Первая проблема заключается в том, что я не могу получить значения в localstorage для повторной загрузки в раскрывающийся список перспективы после страницы refre sh. Вторая проблема заключается в том, что значение, хранящееся в localstorage, не является правильным значением, которое было фактически выбрано в раскрывающемся списке. Похоже, что localalstorage хранит либо последнее значение в раскрывающемся списке, либо первое значение в раскрывающемся списке. Локальное хранилище во втором раскрывающемся меню всегда хранит последнее значение, а в третьем раскрывающемся всегда хранится первое значение. Пожалуйста, извините мой код. Это не очень эффективно. Я все еще учусь писать лучший код. Я постараюсь сжать мой код как можно лучше, чтобы вы могли видеть, что происходит. Я был бы признателен за каждый совет, который вы, хорошие программисты, можете дать мне по этой проблеме и по написанию кода в целом. Вызов jquery и ajax выглядит следующим образом:
enter code here
$(document).ready(function () {
$('.country').on('change', function () {
var countryId = $(this).val();
var state_select = $(this).closest('form').find('.state');
var city_select = $(this).closest('form').find('.city');
if (countryId) {
$.ajax({
type: 'POST',
dataType: 'json',
url: 'ajaxData.php',
data: {
country_id: countryId
},
success: function (r) {
console.log('States', r);
if (r.status) {
r.data.forEach(function (state) {
$(state_select).append(`<option value="${state.id}">${state.name}</option>`);
$('.state').each(function(r) {
var stateList = $(state);
var thisSelection = $(this);
var thisId = thisSelection.attr('id');
var storageId = 'state-' + thisId;
var storedInfo = localStorage.getItem(storageId);
thisSelection.on('change', function(e) {
var selectedOptions = [];
thisSelection.find(':selected').each(function(i) {
var thisOption = $(this);
selectedOptions.push(thisOption.val());
});
localStorage.setItem(storageId, (state.name));
});
});
});
} else {
$(state_select).html('<option value="" selected="selected">Unavailable</option>');
$(city_select).html('<option value="" selected="selected">Unavailable</option>');
}
}
})
};
});
$('.state').on('change', function () {
var stateId = $(this).val();
var city_select = $(this).closest('form').find('.city');
if (stateId) {
$.ajax({
type: 'POST',
dataType: 'json',
url: 'ajaxData.php',
data: {
state_id: stateId
},
success: function (r) {
console.log('Cities', r);
if (r.status) {
r.data.forEach(function (city) {
$(city_select).append(`<option value="${city.id}">${city.name}</option>`);
$('.city').each(function(i) {
var stateList = $(city);
var thisSelection = $(this);
var thisId = thisSelection.attr('id');
var storageId = 'city-' + thisId;
var storedInfo = localStorage.getItem(storageId);
thisSelection.on('change', function(e) {
var selectedOptions = [];
thisSelection.find(':selected').each(function(i) {
var thisOption = $(this);
selectedOptions.push(thisOption.val());
});
localStorage.setItem(storageId, (city.name));
});
});
});
} else {
$(city_select).html('<option value="" selected="selected">Unavailable</option>');
}
}
})
};
});
});
Разметка HTML выглядит следующим образом:
<form id="form1" autocomplete="off">
<select id="country1" class="country" name="country">
<?php include("countryAjaxData.php"); ?>
</select>
<select id="state1" class="state" name="state">
<option value="" selected="selected">Select state</option>
</select>
<select id="city1" class="city" name="city">
<option value="" selected="selected">Select city</option>
</select>
</form>
<form id="form2" autocomplete="off">
<select id="country2" class="country" name="country">
<?php include("countryAjaxData.php"); ?>
</select>
<select id="state2" class="state" name="state">
<option value="" selected="selected">Select state</option>
</select>
<select id="city2" class="city" name="city">
<option value="" selected="selected">Select city</option>
</select>
</form>
<form id="form3" autocomplete="off">
<select id="country3" class="country" name="country">
<?php include("countryAjaxData.php"); ?>
</select>
<select id="state3" class="state" name="state">
<option value="" selected="selected">Select state</option>
</select>
<select id="city3" class="city" name="city">
<option value="" selected="selected">Select city</option>
</select>
</form>
Я пытался зафиксируйте «setItem» и проанализируйте «getItem», например;
localStorage.setItem(storageId, JSON.stringify(state.name));
var item = JSON.parse(localStorage.getItem("storageId"));
var item = JSON.parse(localStorage.getItem("xyz")); //keys of items in localstorage
Если кто-нибудь знает, что, черт возьми, я делаю неправильно, я был бы очень признателен за правильное руководство. Спасибо