CODEWITHSUNDEEP
jqueryhtml
mayuresh kapdule
mayuresh kapdule

Reputation: 21

To find Id From Selected Datalist Option

Give me the solution for this here also i cant get id of options tag. i do lots of code for only to find id from that datalist please help me.

<script>
function myFunction() {
    var x = document.getElementById("browsers").options.id;
    alert(x);
}
</script>
<!DOCTYPE html>
<html>
<body>

<form>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option id="1" value="Internet Explorer">
    <option id="2" value="Firefox">
    <option id="3" value="Chrome">
    <option id="4" value="Opera">
    <option id="5" value="Safari">
  </datalist>
</form>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>



</body>
</html>

Upvotes: 0

Views: 5889

Answers (1)

eisbehr
eisbehr

Reputation: 12452

Way to complicated in your example. You can just select the option by its value. And note, the id of the input is #code1, not #srch1.

var g = $('#code1').val();
var id = $('#datalist1 option[value=' + g +']').attr('data-id');
// var id = document.querySelector('#datalist1 option[value=' + g +']').dataset.id;

console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="srch1" id="code1" value="b" />
<datalist id="datalist1">
  <option data-id="1" value="a"></option>
  <option data-id="2" value="b"></option>
  <option data-id="3" value="c"></option>
</datalist>

Upvotes: 3

Related Questions