如何保持 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() {&nbsp; //check if there is any value in localStorage&nbsp; if (localStorage.getItem("save") != null) {&nbsp; &nbsp; //get that value&nbsp; &nbsp; var value = localStorage.getItem("save");&nbsp; &nbsp; console.log(value);&nbsp; &nbsp; //set value in selected box&nbsp; &nbsp; $("#sub-category").val(value);&nbsp; }&nbsp; //onchange of subcategory&nbsp; $('#sub-category').change(function() {&nbsp; &nbsp; var values = $(this).val();&nbsp; &nbsp; localStorage.clear(); //clear previous data&nbsp; &nbsp; localStorage.setItem("save", values); //add data to storage&nbsp; });&nbsp; $('#category').change(function() {&nbsp; &nbsp; var cat_id = $('#category').val();&nbsp; &nbsp; $('#sub-category').empty();&nbsp; &nbsp; $.get('fetchCategories.php', {&nbsp; &nbsp; &nbsp; 'cat_id': cat_id&nbsp; &nbsp; }, function(return_data) {&nbsp; &nbsp; &nbsp; $.each(return_data.data, function(key, value) {&nbsp; &nbsp; &nbsp; &nbsp; $("#sub-category").append("<option value='" + value.subcat_id + "'>" + value.subcat_name + "</option>");&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }, "json");&nbsp; });});&nbsp;