Javascript 如何保持jQuery自动填充下拉列表结果处于选中状态？

我有一个动态下拉菜单，它会在选择一个选择菜单时获取结果，但在提交表单时自动填充第二个下拉菜单的结果后，我面临的挑战是第二个选择的值消失了。如何使它即使在提交后也不会消失

这是我的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>  

您可以使用localStorage存储用户在更改选择框时选择的当前值，然后当页面重新加载时，只需从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");
  });

}); 

---

在页面加载时，您可以创建一个函数，在您编写选择代码的地方调用您的php，并使用ajax或localStorage显示相同的代码？嗨，@Swati，你们能在这里帮助我吗？“我真的需要你帮我一个忙，我不明白我怎么能帮你。”达曼：谢谢你，我会帮你的。你能帮我解决一下我目前的处境吗？什么不管用？你有什么错误吗？选择框未填充？Swati一次从类别中选择一个值，如果选中，则显示子类别结果，在我从子类别中选择一条记录并点击“提交”后，只有类别值保持选中。子类别选定数据消失。我误解了您的问题。。我想你需要再次显示选择框。。所以您需要在选择框中显示所选值？刷新时，选择框仍在，但选定值消失？我说的对吗？是的，这就是我所说的子类别中的选定值保持选定：提交时消失：我衷心感谢您对我的耐心。

@$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);

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

});