Bonjour je pense que le select se vide à cause de cette ligne là:
$('#booking_offer').html('');
qui clairement sélectionne le select et remplace le contenu HTML par une chaine de texte vide,
ce code ce déclenchant à chaque changement de valeur dans le select,
au moment où tu change de valeur le select et vidé.
C'est parce-que tu déclenche la fonction DiscountOffer après chaque changement de valeur.
<select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer" onchange="DiscountOffer(this.value)">
A noter que lorsque le select et vidé la requête AJAX et envoyée.
function DiscountOffer(id){
$('#booking_offer').html('');
$.ajax({
type: 'post',
url: 'ajaxdata.php',
data: {offer_id : id},
success: function(data){
document.getElementById('booking_discount').value= data;
}
})
}
Est-ce que juste envoyer la requête AJAX sans vidé le select ne pourrait pas suffire ?
function DiscountOffer(id){
// $('#booking_offer').html('');
$.ajax({
type: 'post',
url: 'ajaxdata.php',
data: {offer_id : id},
success: function(data){
document.getElementById('booking_discount').value= data;
}
})
}
Il paraît plus normal que la requête AJAX (la validation du select) soit faite lorsque l'utilisateur valide complétement un formulaire du genre:
<form action="#" method="POST" id="form_booking_offer">
<select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer">
<option value="">Sélectionner l'offre</option>
<?php
$stmt = $db->prepare("SELECT * FROM tab_offer ORDER BY offer ASC");
$stmt->execute();
while ($row = $stmt->fetch()) {
//$row['offer'];
echo '<option value="'.$row['id_offer'].'">'.$row['offer'].'</option>';
}
?>
</select>
<button type="submit">Envoyer</button>
</form>
<script>
// sélectionne et écoute l'envoi du formulaire
$("#form_booking_offer").submit(function(event) {
// annule le comportement par défaut
// (l'envoi des données à la source + rechargement de la page)
event.preventDefault();
// lit la valeur dans le select
const id = $("#booking_offer").value;
console.log(`Formulaire booking offer envoyer avec la valeur: ${id}`);
// envoi la requête AJAX
$.ajax({
type: 'post',
url: 'ajaxdata.php',
data: {offer_id : id},
success: function(data){
document.getElementById('booking_discount').value = data;
}
})
});
</script>