我有這個動態下拉菜單，它在選擇一個選擇菜單時獲取結果，但是在它自動填充第二個下拉菜單的結果后，我面臨的挑戰是提交表單時第二個選擇的值消失了。提交后如何讓它不消失？這是我的 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; }
1 回答
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
您可以使用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");
});
});
- 1 回答
- 0 關注
- 128 瀏覽
添加回答
舉報
0/150
提交
取消