如何保持 jQuery 自动填充下拉结果被选中？

Question

我有这个动态下拉菜单，它在选择一个选择菜单时获取结果，但是在它自动填充第二个下拉菜单的结果后，我面临的挑战是提交表单时第二个选择的值消失了。提交后如何让它不消失？这是我的 HTML 和 PHP <div class="row form-group">                    <div class="col-md-12">                    <label class="sr-only" for="job_category">Select Job Category</label>            <select name="job_category" id="category" class='form-control'>            <option value='' selected='selected' disabled='disabled'>Select Job Category</option>            <?php                       $sql="select * from job_category ";                         foreach ($db->query($sql) as $row) {            ?>            <option value='<?php echo $row[cat_id]; ?>' <?php if($job_category == ''.$row[cat_id].'') echo 'selected="selected"'; ?>><?php echo $row[cat_name]; ?></option>            <?php               }            ?>                      </select>            </div>        </div>                <div class='row form-group'>                    <div class='col-md-12'>                    <label class='sr-only' for='job_subcategory'>Select Job Industry</label>                <select name='job_subcategory' id='sub-category' class='form-control'>                <option value='' selected='selected' disabled='disabled'>Select Job Industry</option>                </select>                </div>            </div>  这是我的JQ$(document).ready(function() {    $('#category').change(function(){        var cat_id=$('#category').val();        $('#sub-category').empty();         $.get('fetchCategories.php',{'cat_id':cat_id},function(return_data){                    $.each(return_data.data, function(key,value){                $("#sub-category").append("<option value='" + value.subcat_id +"'>"+value.subcat_name+"</option>");            });        }, "json");        });    });还有我的 fetchCategories.php@$cat_id=$_GET['cat_id'];//$cat_id=2;/// Preventing injection attack //// if(!is_numeric($cat_id)){echo "Data Error";exit; }

Answer 1

您可以使用localStorage存储value用户在更改选择框时选择的当前数据，然后当您的页面获取时，reload只需从 localStorage 获取存储的数据，然后调用您的 ajax 来检索所需的数据。

您的jquery代码将如下所示（对于任何语法错误，我们深表歉意）：

$(document).ready(function() {

  //check if there is any value in localStorage

  if (localStorage.getItem("save") != null) {

    //get that value

    var value = localStorage.getItem("save");

    console.log(value);

    //set value in selected box

    $("#sub-category").val(value);

  }

  //onchange of subcategory

  $('#sub-category').change(function() {

    var values = $(this).val();

    localStorage.clear(); //clear previous data

    localStorage.setItem("save", values); //add data to storage

  });

  $('#category').change(function() {

    var cat_id = $('#category').val();

    $('#sub-category').empty();

    $.get('fetchCategories.php', {

      'cat_id': cat_id

    }, function(return_data) {

      $.each(return_data.data, function(key, value) {

        $("#sub-category").append("<option value='" + value.subcat_id + "'>" + value.subcat_name + "</option>");

      });

    }, "json");

  });

});