How can I change selected option based on database value?-CodePudding

In order to get you familiar with my work, I have table filled with data from database and it's basically CRUD - Create, Read, Update, Delete table.

Now, I have one table column where are EDIT and DELETE buttons placed. When I click on EDIT button, Bootstrap 5 modal pop-ups and inside of that modal there're <input> elements, also filled with data from database. Everything works fine (is filled correctly and based on ID of selected row) except that I can't get <select> to change its value on value from database.

Here's my <select> element (HTML):

<div >
              <select  name="carStatus" id="carStatus"  required>
              <option value="U obradi" selected disabled hidden></option>
              <option value="Na cekanju">Na cekanju</option>
              <option value="U procesu">U procesu</option>
              <option value="Zavrseno">Zavrseno</option>
              </select>
              <div >Niste unijeli status!</div>
            </div>

This is js code where I handle values of input fields inside of modal:

// Fill in values and handle edit event

    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();
    
    //Here I am handling value of carStatus (<select>)
      if(response.carStatus == "Na cekanju"){
        selectElement("carStatus", 'Na cekanju');
      }
      else if(response.carStatus == "U procesu"){
        selectElement("carStatus", 'U procesu');
      }
      else if(response.carStatus == "Zavrseno"){
        selectElement("carStatus", 'Zavrseno');
      }
      else{
        selectElement('carStatus', '');
      }
    
       //There are a lot of others element that I handle on the way like this:
      document.getElementById("id").value = response.id; //This works
enter code here
      //But I didn't want to put all of them because it'd take too much space...

        //Here's my function where I am trying to handle value of selected element:
      function selectElement(request, valueToSelect) {    
        let element = document.getElementById(request);
        element.value = valueToSelect;
         //Also I am getting the correct value -> when I select some row where Zavrseno is placed I really get Zavrseno in console...
        console.log(response.carStatus);
    }
    };

Ohh, by the way there are 4 possible values that can be selected: "U obradi", "Na cekanju", "U procesu", "Zavrseno"

CodePudding user response：

I actually found out what's the reason why my code didn't work, even though it should've worked perfectly fine, because code itself was written correctly.

The problem was I also had the add modal at the same page with same id which was carStatus (id="carStatus"). Removing it was enough to fix the problem.

Now, the thing is I know that you can't have same id's at the same page, but can somebody explain me why's element which is placed inside Add modal causing problem when I am triggering this action on edit button?