Jestem nowicjuszem z problemem Localstorage. Mam kilka zależnych rozwijanych, które są ładowane przez AJAX z serwera. Gdy użytkownik dokonuje wyboru Localstorage przechowuje niewłaściwą wartość ... ostatnia wartość. Od moich badań pomyślałem, że Czy ktoś może dowiedzieć się, co powoduje ten problem? Jest .map () prawidłowe rozwiązanie? Oto zdjęcie tego, z czym mam problem. Wpisz opis obrazu tutaj

Oto kod

    $('.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>');
                    }

                }
            })
        };

Oto znaczniki

         <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>
0
kejo 17 styczeń 2020, 08:32

1 odpowiedź

Najlepsza odpowiedź

Postanowiłem opublikować odpowiedź, aby inni mogli zobaczyć. Mam nadzieję, że ktoś tu na stackoverflow poświęci trochę czasu, aby pomóc mi następnym razem. To "głosowanie", "punktów" i "odznaka" staje się drogi do rzeczywistego uczenia się.

Foreach () ponawia funkcję za każdym razem, gdy jest nazywany. Więc ostatni wpis będzie tam, gdzie uzupełnia ponówka. LocalStorage.SetiTem musi zostać przeniesiony do funkcji. Dzięki () funkcji lub .on ("zmiana", funkcja ()) i wartość musi być

    localStorage.setItem('yourkeyhere', JSON.stringify($(this).text())); 
0
kejo 19 styczeń 2020, 16:48