Set a value to HTML select while using Ajax and SweetAlert2

August 18, 2022

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>