javascript - 如何使用下拉列表中所选对象的属性自动填充文本框

Question

在我的 html 页面中，我想使用下拉列表中所选对象(商店)的信息(通用名称、位置等)自动填充文本框，而无需刷新页面。

这是下拉列表:

<select id="shops" class="form-control"> 
    <option  value="">Choisir</option>
    <option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" onClick = "autofillValues()"/>                                               
</select> 

这是脚本:

function autofillValues()){
  document.getElementById('commonName').value = $('#shop').find(":selected").val().siret;
}

我尝试了几个代码两周，但还没有找到解决方案。

Answer 1

正如 Vincent 提到的，数据需要保存在前端的某个地方。这可以只是代码中的一个数组，也可以通过 API 请求从后端端点拉取。

例如，如果您有一个像这样的数组:

 [ 
   { 
      uuid:"49c03f73-c0c5-4bc6-bde4-4a01f66f86c1",
      commonName:'Shop 1',
      location:'New York, NY, US'
   },
   { 
      uuid:"1cb2eeb7-6618-4a7a-8334-72cb0c90bf2a",
      commonName:'Shop 2',
      location:'Toronto, ON, CA'
   }
]

在 autofillValues 函数中，您可以按 id 过滤数组(假设它名为 shopList)并填充元素。

<select id="shops" class="form-control" onchange="autofillValues(value)"> 
    <option  value="">Choisir</option>
    <option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" />                                               
</select> 

function autofillValues(id){
    let shop = shopList.find(f => f.uuid == id);

    if(shop !== null) {
      document.getElementById('commonName').value = shop.commonName;
    }     
}

为了简单起见，我将选项上的 onclick attr 替换为选择上的 onchange attr

这是一个非常基本的实现，但是 here's it working on JSFiddle