How to get data from a special attribute in datalist using javascript?

Question

I want to get the data inside "opt_id". And the same code works when i use selelct tag insted of datalist .

This is how my code looks like:

 var get_data = document.getElementById("select_opt"); var dataIndex = get_data.options[get_data.selectedIndex].getAttribute("opt_id");

 <input id="optio_lists" list="options" placeholder="Search..."> <datalist id="select_opt"> <option opt_id="0" label="Cricket">Cricket</option> <option opt_id="1" label="Football">Football</option> <option opt_id="2" label="Tennis">Tennis</option> <option opt_id="3" label="Basketball">AKITA</option> </datalist>

Answer 1

In your script tag in the get_data variable at document.getElementById() you have misspelled the id - instead of select_opt you have written select_op .

Answer 2

Data list is just a source of data and is different from a select box. Hence selectedIndex property doesn't makes sense here.

Check this link for more details - Is there a SelectedIndex for an HTML5 DataList?