Почему локальное хранилище хранит неправильное значение? - PullRequest
Новая
       25

Почему локальное хранилище хранит неправильное значение?

0 голосов
/ 17 января 2020

Я новичок ie с проблемой местного хранения. У меня есть несколько зависимых выпадающих меню, которые загружаются через сервер ajax. Когда пользователь делает выбор, локальное хранилище сохраняет неправильное значение ... последнее значение. Из моего исследования я подумал, что .map () может быть решением моей проблемы, но будучи новичком ie, я не знаком с синтаксисом и не смог заставить его работать. Может кто-нибудь выяснить, что вызывает эту проблему? Является ли .map () правильным решением? Вот фотография того, с чем у меня проблема. enter image description here

Вот код 

    $('.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: 'ajaxData3.php',
                data: {
                    country_id: countryId
                },                     
                success: function (r) {
                    console.log('States', r);

                    $(state_select).html('<option value="" selected="selected">State</option>');
                    $(city_select).html('<option value="" selected="selected">City </option>');

                    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 = JSON.parse(localStorage.getItem(storageId));                                


                                thisSelection.change(function(i) {                                   
                                    var selectedOptions = []; // create an array to hold all currently selected options 

                                    thisSelection.find('option:selected').each(function(i) {
                                        var thisOption = $(this);
                                        selectedOptions.push(thisOption.val());                                           
                                    });

                                    localStorage.setItem(storageId, JSON.stringify(state.name));                                       

                                })                                  

                            })

                        })

                    } else {

                        $(state_select).html('<option value="" selected="selected">Unavailable </option>');
                        $(city_select).html('<option value="" selected="selected">Unavailable </option>');
                    }

                }
            })
        };

Вот разметка 

         <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>

1 Ответ

0 голосов
/ 19 января 2020

Я решил опубликовать ответ, чтобы другие могли видеть. Надеюсь, кто-то здесь, на stackoverflow, найдет время, чтобы помочь мне в следующий раз. Эта вещь «голосование», «очки» и «значок» мешает реальному обучению.

forEach () повторяет функцию каждый раз, когда она вызывается. Таким образом, последняя запись будет там, где повторение завершено. LocalStorage.setItem необходимо переместить в функцию .change () или .on ('change', function ()), а значение должно быть .text () для простого чтения отображаемого текста. 

    localStorage.setItem('yourkeyhere', JSON.stringify($(this).text()));
...