Why value of select isn't showing inside of modal like value of input everything else?

Question

So, basically I have this modal which pop-ups when I click edit button, the thing is I am able to get values of every input, except of select value.

To get you a little bit familiar with situation here, the process of what's happening is following:

I have one table (which is dynamically populated by the data from database) - works fine and it basically shows value it should show inside of that table.

Now apart from that I have edit and delete button and when I click edit button modal pop-ups and let's say I've clicked EDIT button on first row of the table, <input> fields in modal pop-up are filled in with data from table (database) corresponding to row where edit button is clicked, except this select thing and what I am expecting that, that same value from table replicates inside of first <option value="" id="vlasnik" name="vlasnik" selected disabled hidden></option> value, so one doesn't have to remember what was initially selected, and here is how my <select> together with <option> looks like:

        <div class="mb-3">
        <select id="vlasnik" name="vlasnik" class="form-control form-control-lg" required> 
        <option value="" id="vlasnik" name="vlasnik" selected disabled hidden></option>
        <?php foreach($users as $user): ?>
        <option value="<?= $user['id']; ?>"><?= "[" . $user['id'] . "]" . $user['username']; ?></option>
        <?php endforeach; ?>
        </select>
        </div>

And it gives me following:

Also, I must say that I am treating other input's differently, like this (actually):

// Edit User Ajax Request
tbody.addEventListener("click", (e) => {
  if (e.target && e.target.matches("a.editLink")) {
    e.preventDefault();
    let id = e.target.getAttribute("id");
    editUser(id);
  }
});

const editUser = async (id) => {
  const data = await fetch(`action.php?edit=1&id=${id}`, {
    method: "GET",
  });
  const response = await data.json();
  document.getElementById("id").value = response.id;
  document.getElementById("make").value = response.make;
  document.getElementById("model").value = response.model;
  document.getElementById("godina").value = response.godina;
  document.getElementById("boja").value = response.boja;
  document.getElementById("vin").value = response.vin;
  document.getElementById("engine").value = response.engine;
  document.getElementById("tip").value = response.tip;
  document.getElementById("vlasnik").value = response.vlasnik;
  document.getElementById("regoz").value = response.regoz;
  document.getElementById("istek").value = response.istek;
  document.getElementById("odometer").value = response.odometer;
  document.getElementById("napomena").value = response.napomena;
  document.getElementById("carStatus").value = response.carStatus;

};

Inside of action.php I have this:

// Handle Edit User Ajax Request
if (isset($_GET['edit'])) {
    $id = $_GET['id'];

    $user = $db->readOne($id);
    echo json_encode($user);
}

And inside of db, readOne method is:

public function readOne($id)
    {
        $sql = 'SELECT * FROM vozila WHERE id = :id';
        $stmt = $this->conn->prepare($sql);
        $stmt->execute(['id' => $id]);
        $result = $stmt->fetch();
        return $result;
    }

As I said I get every other value except for option. Does anybody know what is the problem and how can I achieve what I want?

Answer 1

document.getElementById("vlasnik").options[document.getElementById("vlasnik").selectedIndex].value

see selectedIndex