从 datalist 选项检索 data-id 时 JavaScript 函数返回 NaN

Question

我正在尝试从数据列表中选定的选项中查找 data-id 的值。我有一个返回正确值的函数，但也给我一个带有“NaN”的弹出窗口。作为对我的问题的标准响应，我使用“intParse”或“isNaN”函数，但似乎没有什么可以阻止返回“NaN”
所以我收到了两个警报。首先使用正确的值，然后在调用此函数时使用“NaN”。

$("#EducationEstablishment").on('input', function() {
  var id = GetDataListOptionValue(EducationEstablishment, establishments);
  alert(id)
});

function GetDataListOptionValue(datalistInputId, dataListId) {

  var x = $(datalistInputId).val();
  var z = $(dataListId);
  var val = $(z).find('option[value="' + x + '"]');
  endval = val.attr('data-id');

  var num = isNaN(parseInt(endval)) ? 0 : parseInt(endval)
  return (num);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="EducationEstablishment" list="establishments" type="text">
<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>

Answer 1

首先，您正在使用 Automatically Created Variable ，您的浏览器或其他东西可能不支持。您使用的 ACV 是 EducationEstablishment 和 elections。所以你应该做的是摆脱这些并使用 jQuery 选择你的输入，如下所示:

$("#EducationEstablishment").on('input', function() {
  // instead of passing those ACVs, we will pass IDs instead (IDs are strings)
  var id = GetDataListOptionValue("#EducationEstablishment", "#establishments");
  alert(id)
});

// instead of getting two ACVs, get IDs then select the elements properly
function GetDataListOptionValue(datalistInputId, dataListId) {

  // datalistInputId will be something like this "#datalisInput"
  var x = $(datalistInputId).val();
  // same here
  var z = $(dataListId);
  var val = $(z).find('option[value="' + x + '"]');
  endval = val.attr('data-id');

  var num = isNaN(parseInt(endval)) ? 0 : parseInt(endval)
  return (num);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="EducationEstablishment" list="establishments" type="text">
<datalist id="establishments">
  <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option>
  <option data-id="100084386" value="National University of Cordoba, Argentina"></option>
</datalist>