如何根据数据库值更改所选选项？

Question

为了让您熟悉我的工作，我 table 填充了数据库中的数据，它基本上是 CRUD - 创建、读取、更新、删除 table。

现在，我有一个 table 列，其中放置了“编辑”和“删除”按钮。当我单击“编辑”按钮时，Bootstrap 5 个模态弹出窗口，并且在该模态内部有 <input> 个元素，也填充了来自数据库的数据。 一切正常（正确填写并基于所选行的 ID）除了我无法<select>根据数据库中的值更改其值.

这是我的 <select> 元素 (HTML):

<div class="mb-3">
              <select  name="carStatus" id="carStatus" class="form-control form-control-lg" 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 class="invalid-feedback">Niste unijeli status!</div>
            </div>

这是 js 代码，我在其中处理模态内输入字段的值：

// 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);
    }
    };

哦，顺便说一句，有 4 个可能的值可供选择： "U obradi", "Na cekanju", "U procesu", "Zavrseno"

Answer 1

我实际上发现了我的代码无法运行的原因，即使它应该运行得很好，因为代码本身编写正确。

问题是我还在同一页面上添加了具有相同 ID 的添加模式，即 carStatus (id="carStatus")。删除它足以解决问题。

现在，问题是我知道您不能在同一页面上使用相同的 ID，但是有人可以解释一下为什么当我在编辑按钮上触发此操作时放置在添加模态中的元素会导致问题吗？

如何根据数据库值更改所选选项？

How can I change selected option based on database value?

html

javascript

ajax