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

Question

我有这个动态下拉菜单，它在一个 select 菜单的 selection 上获取结果，但是我面临的挑战是它在提交表单时自动填充第二个下拉菜单的结果秒 select 的值消失。如何让它提交后不消失？

这是我的 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;
 }
/// end of checking injection attack ////
require "includes/config.php";

$sql="select subcat_name,subcat_id from job_subcategory where cat_id='$cat_id'";
$row=$db->prepare($sql);
$row->execute();
$result=$row->fetchAll(PDO::FETCH_ASSOC);

$main = array('data'=>$result);
echo json_encode($main);

Answer 1

您可以使用 localStorage 来存储当前的 value，这是由用户在更改 select 框时 select 编辑的，然后当您的页面得到 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");
  });

});

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

How to keep jQuery auto populated dropdown result selected?

javascript

php

jquery

auto-populate

drop-down-menu