javascript - 在 JavaScript 中更改 <input> 的 `list` 属性

Question

Demo

尝试更改输入 ID:列表从 A 到 B，但没有更改。

我计划用 PHP 从 MySQL 创建许多数据列表，

选择公司名称，然后在下一个列表中查看他们的员工。

HTML:

change List:
<input type="text" id="List" list="A">
<br>
<br>
<input type="text" id="A" value="B">
<br>
<button onclick="change()">
  Change List
</button>

<datalist id="A">
  <option value="None">
    <option value="1">
      <option value="2">
</datalist>

<datalist id="B">
  <option value="3">
    <option value="4">
</datalist>

JavaScript:

function change() {
  console.log("Started");
  var x = document.getElementById('A').value;
  document.getElementById('List').list = x;

  var check = document.getElementById('List').list

  if (check === x) {
    console.log("Complete");
  } else {
    console.log("Failed");
  }
}

谢谢，它现在工作了。

Working

Answer 1

According to the Mozilla Developer Network docs , list属性是只读的，实际上返回对 DOM 元素的引用(如 <datalist> ):

list [Read only]

HTMLElement object: Returns the element pointed by the list attribute. The property may be null if no HTML element found in the same tree.

因此，您需要使用 setAttribute通过 id 设置列表, 然后使用 element.list.id检索 check 的正确值.

function change() {
  console.log("Started")
  var x = document.getElementById('A').value
  
  document.getElementById('List').setAttribute('list', x)

  var check = document.getElementById('List').list.id

  if (check === x) {
    console.log("Complete");
  } else {
    console.log("Failed");
  }
}

change List:
<input type="text" id="List" list="A">
<br>
<br>
<input type="text" id="A" value="B">
<br>
<button onclick="change()">
  Change List
</button>

<datalist id="A">
  <option value="None">
    <option value="1">
      <option value="2">
</datalist>

<datalist id="B">
  <option value="3">
    <option value="4">
</datalist>