Как сохранить значение параметров выпадающего списка после отправки формы

Question

У меня есть три варианта выпадающих данных, которые извлекают данные из базы данных, состояния и города. city select option с использованием ajax для получения значения из базы данных на основе select in state значение, все работает штраф на получение значения. state value используют php function to populate.

Проблема заключается в втором выборе варианта, который равен city option, не сохраняя значения в строке выбора параметров после отправки формы. (в основном это сбрасывается). Вторая проблема после отправки формы: выбор options of city не заполняется, вам нужно изменить другой option of state, прежде чем вы сможете изменить его в списке городов.

Просматривает множество тем и ищет, но не может найти решение. я думаю, что значения должны оставаться после перезагрузки страницы, потому что я использовал localstorage для категорий и состояний и не имел проблем, даже у city option есть свои значения внутри localstorage, только если он не отображает параметр внутреннего выбора после перезагрузки страницы.

function get_state(){ 
    global $db; 
    $output = ''; 
    $results = $db->query("SELECT * FROM region"); 
    foreach($results as $state) { 
    $output .='<option value="'.$state["pk_i_id"].'">'.$state["s_name"].'</option>'; 
    } 
    return $output; 
} 

<form method="GET"> 
<div class="container"> 
    <div class="form-group"> 

     <select name="categories" id="categories" class="btn-sm saveIt"> 
     <option value=""></option> 
     <?=get_categories();?> 
     </select> 

     <select name="state" id="state" class="btn-sm saveIt"> 
     <option value=""></option> 

     <?=get_state();?> 
     </select> 

     <select name="city" id="city" class="btn-sm saveIt"> 
     <option value=""></option> 
     </select> 


     <button type="submit" id="go">Go</button> 


    </div> 
</div> 
</form> 

Ajax скрипт

$(document).ready(function() { 
     function get_city(){ 
     var stateID = $('#state').val(); 
     $.ajax({ 
      url: '/parsers/city_list.php', 
      type: 'POST', 
      data: {stateID : stateID}, 
      success: function(data){ 
      $('#city').html(data); 
      }, 
      error: function() { 
      alert("Something went wrong with the city list.") 
      }, 
     }); 
     } 
     $('select[name="state"]').change(get_city); 
    }); 

И city_list.php для Ajax вызова

<?php 
    require_once $_SERVER['DOCUMENT_ROOT'].'/core/init.php'; 
    $stateID = (int)$_POST['stateID']; 

    $cityQuery = $db->query("SELECT * FROM city WHERE fk_i_region_id = '$stateID' "); 
    ob_start(); 
    ?> 
    <option value="">Select City</option> 
    <?php while($city = mysqli_fetch_assoc($cityQuery)): ?> 
    <option value="<?=$city['pk_i_id'];?>"><?=$city['s_name'];?></option> 
    <?php endwhile; ?> 

<?php echo ob_get_clean(); ?> 

благодарственным заранее, если вам нужно некоторые детали я могу provide.Thank вас.

A link to sample code!

Эта ссылка для плагина jqry с localstorage. [jquery plugin] [1].

Дисплей перед отправкой формы был в порядке только после подачи формы city option отображает значение вместо name of value.

Вторые выпуски после отправки формы показывают только один вариант, его предполагается показать всю опцию, вам нужно сначала изменить city options, затем отобразится все city list.

Problem two image link

Answer 1

ОЧЕРЕДНАЯ НОВАЯ ВЕРСИЯ

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

Во-первых, файл index.php:

<?php 

$states = [ 
    0 => [ 
    'pk_i_id' => 0, 
    's_name' => 'Montana' 
    ], 
    1 => [ 
    'pk_i_id' => 1, 
    's_name' => 'Nebraska' 
    ], 
    2 => [ 
    'pk_i_id' => 2, 
    's_name' => 'Idaho' 
    ], 
]; 

function get_state($states, $selectedID){ 

    $output = ''; 

    foreach($states as $state) { 
    if ($state['pk_i_id'] == $selectedID) { 
     $output .='<option selected value="'.$state["pk_i_id"].'">'.$state["s_name"].'</option>'; 
    } else { 
     $output .='<option value="'.$state["pk_i_id"].'">'.$state["s_name"].'</option>'; 
    } 
    } 
    return $output; 
} 

?> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    </head> 
    <body> 

    <form method="GET"> 
    <div class="container"> 
     <div class="form-group"> 

      <select name="categories" id="categories" class="btn-sm saveIt"> 
      <option value="">Categories</option> 
      </select> 

      <select name="state" id="state" class="btn-sm saveIt"> 
      <option value="">State</option> 
      <?php 

       if (isset($_GET['state'])) { 
       $stateID = $_GET['state']; 
       } else { 
       $stateID = -1; 
       } 

      ?> 
      <?php echo get_state($states, $stateID); ?> 
      </select> 

      <select name="city" id="city" class="btn-sm saveIt"> 
      <option value="">City</option> 
      <?php 

       if (isset($_GET['city'])) { 
       echo "<input id=\"hiddenInput\" type=\"hidden\" value=\"{$_GET['city']}\">"; 
       } 

      ?> 
      </select> 

      <button type="submit" id="go">Go</button> 

     </div> 
    </div> 
    </form> 

    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script 
    src="https://code.jquery.com/jquery-3.1.1.js" 
    integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
    crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    <script src="script.js" type="text/javascript" charset="utf-8" async defer></script> 
    </body> 
</html> 

Далее city_list.php файл:

<?php 

    // Montana 
    $cityList[0] = [ 
    0 => [ 
     'pk_i_id' => 0, 
     'city_name' => 'Bozeman' 
    ], 
    1 => [ 
     'pk_i_id' => 1, 
     'city_name' => 'Helena', 

    ], 
    2 => [ 
     'pk_i_id' => 2, 
     'city_name' => 'Butte' 
    ], 
    ]; 

    // Nebraska 
    $cityList[1] = [ 
    0 => [ 
     'pk_i_id' => 0, 
     'city_name' => 'Omaha' 
    ], 
    1 => [ 
     'pk_i_id' => 1, 
     'city_name' => 'Hastings', 

    ], 
    2 => [ 
     'pk_i_id' => 2, 
     'city_name' => 'Lincoln' 
    ], 
    ]; 

    // Idaho 
    $cityList[2] = [ 
    0 => [ 
     'pk_i_id' => 0, 
     'city_name' => 'Boise' 
    ], 
    1 => [ 
     'pk_i_id' => 1, 
     'city_name' => 'Twin Falls', 

    ], 
    2 => [ 
     'pk_i_id' => 2, 
     'city_name' => 'Caldwell' 
    ], 
    ]; 

    ob_start(); 
    ?> 
    <option value="">Select City</option> 
    <?php foreach ($cityList[$_REQUEST['stateID']] as $city) {?> 
    <?php if ($_REQUEST['selected'] == $city['pk_i_id']) : ?> 
     <option selected value="<?=$city['pk_i_id'];?>"><?=$city['city_name'];?></option> 
    <?php else: ?> 
     <option value="<?=$city['pk_i_id'];?>"><?=$city['city_name'];?></option> 
    <?php endif; ?> 
    <?php } ?> 

<?php echo ob_get_clean(); ?> 

Наконец, script.js:

$(document).ready(function() { 

    function get_city(selected) { 
    var stateID = $('#state').val(); 
    $.ajax({ 
     url: 'city_list.php', 
     type: 'POST', 
     data: {stateID : stateID, selected : selected}, 
     success: function(data){ 
     $('#city').html(data); 
     }, 
     error: function() { 
     alert("Something went wrong with the city list.") 
     }, 
    }); 
    } 

    $('select[name="state"]').change(function() { 
    get_city(-1); 
    }); 

    if ($('select[name="state"]').val() != '') { 
    var hiddenInput = document.getElementById('hiddenInput'); 
    if (!!hiddenInput) { 
     get_city(hiddenInput.value); 
    } else { 
     get_city(-1); 
    } 
    } 

}); 

Поместите все те в том же каталоге, а затем проверьте функциональность.Если это соответствует тому, что вам нужно, настройте его для своего проекта!