CODEWITHSUNDEEP
javascripthtml
John Williams
John Williams

Reputation: 121

Change the `list` attribute of an <input> in JavaScript

Demo

Trying to change the input ID: List from A to B, but its not changing.

I am planning on creating many datalist with PHP from MySQL,

Select Company name, and see their employees in next list.

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

Thank you, its now working.

Working

Upvotes: 9

Views: 7234

Answers (4)

Milan Jedlicka
Milan Jedlicka

Reputation: 1

Javascript

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

Upvotes: 0

gyre
gyre

Reputation: 16777

According to the Mozilla Developer Network docs, the list attribute is read-only and actually returns a reference to a DOM element (like a <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.

Thus, you need to use setAttribute to set the list by id, and then use element.list.id to retrieve the correct value for 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>

Upvotes: 5

elpddev
elpddev

Reputation: 4484

You need to set the value property on the dom element

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

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

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

Upvotes: -1

kind user
kind user

Reputation: 41893

Since list is not a standard attribute, direct refering with the dot notation won't work. Use getAttribute and setAttribute functions instead.

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

Upvotes: 0

Related Questions