How to get the data-id value in this code

Question

here i want to if i am select bangalore i want to take that value 1,suppose hydrabad means 2,i am trying but i am getting undefined

$(document).ready(function() {
  $("#resi_btn_search").click(function() {
    alert($(this).data("id"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;">
  <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City">
  <datalist id="options">
    <option data-id="1">Bangalore</option>
    <option data-id="2">hydrabad</option>
    <option data-id="3">Miredhpedia</option>
    <option data-id="3">Bangalore</option>
  </datalist>
  <input type="submit" id="resi_btn_search">
</div>

Answer 1

Inside click event handler this refers to the clicked element and $(this).data("id") would try to get the data attribute value of clicked element which is undefined.

Update the datalist with value attribute and later you can get the selected option by using attribute equals selector.

$(document).ready(function() {
  $("#resi_btn_search").click(function() {
    console.log($('#options option[value="' + $('#location12').val() + '"]').data('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;">
  <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City">
  <datalist id="options">
    <option data-id="1" value="Bangalore" />
    <option data-id="2" value="hydrabad" />
    <option data-id="3" value="Miredhpedia" />
    <option data-id="3" value="Bangalore" />
  </datalist>
  <input type="submit" id="resi_btn_search">
</div>

---

Or you need to use filter() method to get the selected option using the input element value.

$(document).ready(function() {
  $("#resi_btn_search").click(function() {
    console.log($('#options option').filter(function() {
      return $('#location12').val() == this.value;
    }).data("id"));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-2 col-xs-2" style="padding-left:0px;padding-right:1px;">
  <input list="options" type="text" class="form-control" style="border-radius:0px;height: 46px;" name="location12" id="location12" placeholder="City">
  <datalist id="options">
    <option data-id="1">Bangalore</option>
    <option data-id="2">hydrabad</option>
    <option data-id="3">Miredhpedia</option>
    <option data-id="3">Bangalore</option>
  </datalist>
  <input type="submit" id="resi_btn_search">
</div>