Question

    for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value="'+ this.elems[i].id +' label="' +this.elems[i].name +'"></option>');
}

（尝试过lable =“”和name =“”）生成要过滤的texfield的列表。此列表在其下方显示较大的id值和较小的标签值。选择选项时，该字段会填充id值。

我如何更改它以仅在列表和字段中显示名称值，但是在提交表单时它属于访问id值？

    for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value="'+ this.elems[i].id +'>' +this.elems[i].name +'</option>');
}

具有相同的结果。我正在使用Angular，列表为<data-list>

编辑：This is what the list looks like now.我希望它仅显示名称。但是，提交表单时，应使用id值。

在JS中，我像这样加载列表

  loadElemList() {
for(let i = 0; i < this.elems.length; i++) {
  document.getElementById('elemsList').innerHTML += ('<option value='+ this.elems[i].id +'>' +this.elems[i].name +'</option>');
}
  }

HTML

  <tr><td><label>Elem:</label></td><td>
<input #elem list="elemList" name="elem" />
<datalist id="elems">
</datalist></td></tr>

然后表单使用

从列表中获取值。

elem.value

其中elem.value应该是ID，但用户只能看到名称。

Answer 1

我认为您在输入值后缺少“。请尝试以下操作：

for(let i = 0; i < this.elems.length; i++) {
    document.getElementById('elemsList').innerHTML += ('<option value="' + this.elems[i].id +'" label="' + this.elems[i].name + '"></option>');
}

如果我误解了这个问题，这可能会产生您想要的东西，抱歉。

HTML <option>标记不显示标签/名称值

1 个答案: