Thu. Jun 8th, 2023

[ANSWERED] javascript – Get custom attribute from selected option from datalist

By

Nov 18, 2022 html, javascript

Solution 1 :

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>

Solution 2 :

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>

Problem :

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>

Comments

Comment posted by developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

You can use

Comment posted by Michael Effraimidis

This returns the attribute of an element, but how do I know which option I selected from the datalist?

Comment posted by AbsoluteBeginner

What does the function “Select1Changed();” do?

Comment posted by secan

You have to loop through the datalist options and find the one whose value is equal to the one in the input. I am going to add an answer with a code snippet, for clarity.

Comment posted by Michael Effraimidis

Both this solution and sandeep joshi works but if I press enter for a value that is not inside the input it shows error. Should I make another question for how this case needs to be handled? Because I now understand I need to detect if the input text has changed upon pressing “enter” as well.

Comment posted by secan

@MichaelEffraimidis, you can handle the case with a simple conditional statement. I updated the snippet to handle the scenario;

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022