Set a value to HTML select while using Ajax and SweetAlert2 - html

Question

I am building a form using SweetAlert2 + Ajax, but I have a problem with the <select> tag, so I will skip segments of the code that have nothing to do with the problem
The Ajax sends the email to the PHP code, then with the email I make a MySQL query to get the full information from the user (name, age and country), I storage the info in an array and returns it to the ajax with echo json_encode($arrayResult), then I print the data with SweetAlert2 but I have the problem that I dont know how to print it with the <select> tag, here is my code so you can understand me better...
The Ajax + SweetAlert2
$.ajax({
type: "POST",
url: "getuserdata.php",
data: {
email : emailX
},
success: function (response){
response = JSON.parse(response);
Swal.fire({
html:`<div>Insert your new information</div>
<div>
<span>Name</span>
<input id="name" type="text" value="${response.name}">
</div>
<div>
<span>email</span>
<input id="email" type="email" value="${response.email}">
</div>
<div>
<span>Age</span>
<input id="age" type="text" value="${response.age}">
</div>
<select id="country">
<option value="USA">USA</option>
<option value="England">England</option>
<option value="Canada">Canada</option>
</select>
`,
})
}
})
An just in case here is the PHP:
<?php
$mysqli = new mysqli("localhost","root","","store");
$mysqli->set_charset("utf8");
$email = $_POST['email'];
$sql = "SELECT * FROM clients WHERE email = '".$email."'";
$result = mysqli_query($mysqli, $sql);
$data = $result->fetch_assoc();
$count = mysqli_num_rows($result);
$arrayResult = [];
if($count > 0){
$arrayResult['name'] = $data['name'];
$arrayResult['age'] = $data['age'];
$arrayResult['country'] = $data['country'];
}else{
$arrayResult['name'] = '';
$arrayResult['age'] = '';
$arrayResult['country'] = '';
}
echo json_encode($arrayResult);
?>
Of course if this was a basic HTML code I would have solve it but it is inside a Javascript + Inside Ajax + inside a SweetAlert2 and I have try all the ways I know but dont work.
The country can be ONLY one of those 3 (USA, England and Canada), there is a ${response.country} that resturns one of those 3 countries.
So what I want is that depending of the country returned It will be the one selected in the <option> of the <select>

Answer 1

I guess you can just assign the return value to your select option!?
something like $("country").val(country);
also, maybe you can check this question, too.
link