Question

在这里我想如果我选择班加罗尔我想要取值1，假设hydrabad意味着2，我正在尝试但我正在未定义

$(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

内部点击事件处理程序this引用点击的元素，$(this).data("id")会尝试获取点击元素的数据属性值undefined。

使用value属性更新datalist，稍后您可以使用attribute equals selector获取所选选项。

＆＃13;

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

＆＃13;

<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>

＆＃13;

或者您需要使用filter()方法来使用输入元素值获取所选选项。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的选项位于$('#options').children()：

function SearchResiCtrl() {
  var $opts = $('#options').children();
  var input = $('#location12');
  var value = input.val().trim();
  
  var opts = Array
    .prototype
    .map
    .call($opts, function(el) {
      var label = el.textContent;
      
      return {
        id: el.dataset.id,
        label: label,
        isSelected: value === label
      };
    })
  ;
  
  var selected = opts.filter(function(o) {
    return o.isSelected;
  })[0] || null;
  
  console.log("options", opts);
  console.log("selected", selected);
}

$(document).ready(function() {
  return $('#resi_btn_search').click(SearchResiCtrl);
})

<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" 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 3

$(function() {

$("#button").click(function() {
    var val = $('#item').val()
    var xyz = $('#items option').filter(function() {
        return this.value == val;
    }).data('xyz');
    var msg = xyz;
    alert(msg)

})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input list="items" id="item"/>

<datalist id="items">
  <option value="A item"  data-xyz = "1" selected="true">
  <option value="aa item" data-xyz = "2" >
  <option value="C item"  data-xyz = "3" >
  <option value="D item"  data-xyz = "4" >
  <option value="E item"  data-xyz = "5" >
  </datalist>
 <input type="button" id="button" value="Get xyz" />

如何在此代码中获取data-id值

3 个答案: