Javascript 如何仅显示数据列表中的文本而不显示值？

假设我们有以下数据列表和一个js变量

var carID=''

：

---

我不能使用JQuery。你有什么解决办法吗？谢谢

您的代码

@change='${carID=e.target.carID}'

无法工作，因为的右侧不可调用。您需要将其封装在匿名函数中，例如：

@change=${（e）=>{this.carID=e.target.value}}

也就是说，这就是我理解你想要做的：

有一个列表，用户可以从中选择

在列表中，仅显示车辆的名称，而不显示ID

将所选车辆的ID存储在

carID

中，而不是名称

我认为有两种方法可以做到这一点

选项1：使用

如果汽车列表是固定的，我认为最好使用

元素，从而生成一个下拉框。包括小事件处理程序，它看起来像这样：

{this.carID=e.target.value}>
法拉利
兰博基尼
吉普车
吉普车

这将显示

元素的文本内容中的文本，但通过

的

值属性设置
的
值，并且借助onchange事件处理程序将在元素上设置
carID
字段

您甚至可以拥有两辆ID不同但名称相同的汽车。但是请注意，如果显示文本相同，用户将不知道要选择两个“Jeep”条目中的哪一个。所以这可能不是一个好主意（但我不知道您的完整用例）

选项2：将
与

现在，如果车辆列表不是固定的，即允许用户输入任意数据，并且选择列表不是为了限制他们的选择，而是为了帮助他们（防止输入错误、加快输入速度），您可以使用带有关联
的
。但弹出窗口将同时显示
的值和文本内容（如果它们都已定义且不同）。如果您坚持只显示车辆的名称，而不显示ID，则名称必须位于
的
值
属性（或文本内容）中。虽然可以将ID放入数据集中，但实际上不需要这样做

在任何情况下，您都需要通过自己的代码将值字符串映射回ID。这只有在“汽车和名字”是一对一（也称为双射）映射的情况下才有效，因此不允许两辆汽车具有完全相同的名字。（否则，您的代码无法仅通过查看名称就知道选择了哪一个。）

const CARS\u BY\u ID={
ID_1:‘法拉利’，
ID_2:‘兰博基尼’，
ID_3:‘吉普车’，
}
类MyElem扩展了LitElement{
构造函数（）{
超级（）；
this.carID=null；
}
render（）{
返回html`
${Object.values（CARS\u BY\u ID）.map（（name）=>html`${name}`）}
`;
}
（e）{
const name=e.target.value；
this.carID=null；
for（Object.entries的常量[键，值]（CARS\u BY\u ID））{
如果（值===名称）{
this.carID=key；
}
}
log（`this.carID=${this.carID}`）；
}
}

注意，在本例中，用户可以输入“Bugatti”和
this.carID
将
null

另外请注意，
this.carID
尚未注册为lit元素属性（它未在
静态获取属性
中列出），因此不会触发更新生命周期，也不会在该更改后重新呈现

<input list="options" @change='${carID = e.target.value}'>
<datalist id="options">
  <option value="ID_1">Ferrari</option>
  <option value="ID_2">Lamborghini</option>
  <option value="ID_3">Jeep</option>
</datalist>

<input list="options" @change="${carID = e.target.carID}">
<datalist id="options">
  <option carID="ID_1" value="Ferrari"></option>
  <option carID="ID_2" value="Lamborghini"></option>
  <option carID="ID_3" value="Jeep"></option>
</datalist>

<input id='inputID' list="options" @change='${this.getValue}'>
 <datalist id="options">
   <option data-value="ID_1" value="Ferrari"></option>
   <option data-value="ID_2" value="Lamborghini"></option>
   <option data-value="ID_3" value="Jeep"></option>
   <option data-value="ID_4" value="Jeep"></option>
 </datalist>

getValue(){
 let shownValue = this.shadowRoot.getElementById('inputID').value;
 let rightValue = 
   this.shadowRoot.querySelector("#options[value='"+shownValue+"']").dataset.value;
 carID = rightValue;
}