Question

尝试更改输入ID：列表从A到B，但不会更改。

我打算用MySQL创建许多使用PHP的数据表，

选择公司名称，并在下一个列表中查看其员工。

HTML：

regions

JAVASCRIPT：

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>

谢谢，它现在正在工作。

Working

Answer 1

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

list [只读]

HTMLElement object：返回list属性指向的元素。   如果在同一树中找不到HTML元素，则该属性可能为null。

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

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 2

由于list不是标准属性，因此使用dot表示法直接引用不会起作用。请改用getAttribute和setAttribute函数。

＆＃13;

function change() {
  console.log("Started");
  var x = document.getElementById('C'),
      list = document.getElementById('List'),
      check = list.getAttribute(list);
      list.setAttribute('list', x);

  if (check === x.getAttribute('list')) {
    console.log("Complete");
  } else {
    console.log("Failed");
  }
}

＆＃13;

<input type="text" id="List" list="A">
<br>
<br>
<input type="text" id="C" 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>

＆＃13;

Answer 3

您需要在dom元素

上设置value属性

  document.getElementById('List').value = x;

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

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

Answer 4

JavaScript

function change() {
     
   document.getElementById('List').setAttribute('list', document.getElementById('A').id);
}

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

4 个答案: