How to keep ajax data after submit on dropdown lists and display selected value?
Question
I have 2 dropdown lists, one is populated by ajax. I'd like to keep the data from the ajax dropdown list after submit and display the selected values but I don't know how here's my code :
<select name="centrale" class="custom-select" id="centrale">
<option value="" >Centrales</option>
<option value="all" <?php if(isset($centrale) && $centrale=='all') echo "selected='select'";?> >Toutes centrales</option>
<option value="LECASUD" <?php if(isset($centrale) && $centrale=='LECASUD') echo "selected='select'";?> >LECASUD</option>
<option value="SCACENTRE" <?php if(isset($centrale) && $centrale=='SCACENTRE') echo "selected='select'";?> >SCACENTRE</option>
</select>
<select id="magasins" name="magasins" class="custom-select">
</select>
$('#centrale').on('change',function(){
$('#magasins').html("<option value='allMag'>tout magasins</option>");
var centrale =$(this).val();
if (centrale){
$.ajax({
type:'POST',
url:'ajaxMag.php',
data:'centrale='+centrale,
success:function(html){
$('#magasins').append(html);
}
});
}
});
1 answers
solution1
0 ACCPTED 2018-09-10 12:16:00
<head>
<title>Example</title>
</head>
<body>
<SELECT type = "text" id = "centrale">
<option value="abc">ABC</option>
<option value="cdf">CDF</option>
</SELECT>
<SELECT type = "text" id = "magasins" onchange ="save_magasins();">
<option value="asd">asd</option>
<option value="dfg">fdg</option>
</SELECT>
<input type = "button" id = "submit_btn">
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#centrale').on('change',function(){
//réinitialise la liste sinon les selections s'ajoutent
$('#magasins').html("<option value='allMag'>tout magasins</option>");
var centrale = $(this).val();
if (centrale){
$.ajax({
type:'POST',
url:'ajaxMag.php',
data:{centrale:centrale},
success:function(html){
$('#magasins').append(html);
}
});
}
});
});
function save_magasins(){
var magasins = document.getElementById('magasins').value;
window.localStorage.setItem("magasins", magasins);
console.log(localStorage.getItem("magasins"));
}
console.log(localStorage.getItem("magasins"));
</script>
Try this. Now i'm trying to save your second drop down values based on an onchange trigger. If you want to save all the option from your second drop down then better save them first inside the success function itself and then populate. If you want to save only the selected option then this will work just fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.