CODEWITHSUNDEEP
javascripthtml
Michael Effraimidis
Michael Effraimidis

Reputation: 79

Get custom attribute from selected option from datalist

When I choose an option from the datalist I want to get its custom attribute "location" and print it. I know that select has selectedIndex but how do I accomplish this using datalist?

<!DOCTYPE html>
<html>
<body>

<input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select">
  <datalist id="select" style="display:none;" onchange="Select1Changed();">
  <option value="one" location="3"/>
  <option value="two" location="15"/>
  <option value="three" location="27"/>
  </datalist>
</body>
</html>

Upvotes: 2

Views: 1990

Answers (2)

sandeep joshi
sandeep joshi

Reputation: 2151

by selecting the element using document.getElementById you are getting HTMLCollection which you can iterate(in you case option list) and find the desired attribute using the attribute object attached to each element.

Also i found that datalist is not available once value is selected if that is desired then okay else you may look into that bug.

function Select1Changed(elem) {
  let location = 'please select a valid option';
  let dt = document.getElementById('select');
  // dt contains a HTMLCollection of options so use for loop to iterate it use childElementCount to get the length if loop
  for (let i = 0; i < dt.childElementCount; i++) {
    // check the selected value with option values.
    if (dt.children[i].attributes.value.value === elem.value) {
      // if Hit use the attributes object to find your attribute and get its value.
      location = dt.children[i].attributes.location.value;
    }
  }
  alert(location);
}
<!DOCTYPE html>
<html>

<body>

  <input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select" onchange="Select1Changed(this);">
  <datalist id="select" style="display:none;">
  <option value="one" location="3"/>
  <option value="two" location="15"/>
  <option value="three" location="27"/>
  </datalist>
</body>

</html>

Upvotes: 1

secan
secan

Reputation: 2679

const dataList = document.getElementById('select');
const textInput = document.getElementById('StartingAddressField');

const getSelecteOptionLocation = () => {
  for (let i = 0; i < dataList.options.length; i++) {
    if (dataList.options[i].value === textInput.value) {
      return dataList.options[i];
    }
  }
}

textInput.addEventListener('change', () => {
  const selectedOption = getSelecteOptionLocation();
  if (selectedOption == undefined) {
    console.log('option not included in the datalist');
  } else {
    console.log(selectedOption.getAttribute('location'));
  }
});
<!DOCTYPE html>
<html>

<body>

  <input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select" onBlur="getSelecteOptionLocation()">
  <datalist id="select" style="display:none;">
      <option value="one" location="3" />
      <option value="two" location="15" />
      <option value="three" location="27" />
    </datalist>
</body>

</html>

Upvotes: 1

Related Questions