當從數據列表選項中檢索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和establishments。所以，你應該做的是擺脫那些和使用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>

Answer 2

我瞭解你想從選項獲得data-id領域，而用戶鍵入的東西。

因此，檢查該代碼：

$("#EducationEstablishment").on('input', function() { 
 
    var id = findDataIdInDataList($(this).data('list'), $(this).val()); 
 
    
 
    $('#EducationEstablishmentDataId').text(''); 
 
    if(id > 0) { 
 
    $('#EducationEstablishmentDataId').text(id); 
 
    } 
 
}); 
 

 

 
function findDataIdInDataList(dataListSelector, value) { 
 
    var $dataList = $(dataListSelector); 
 
    if(!$dataList) return 0; 
 
    
 
    var $selectedOption = $dataList.find('option[value="'+value+'"]:first'); 
 
    if(!$selectedOption) return 0; 
 
    
 
    return parseInt($selectedOption.data('id')) || 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input id="EducationEstablishment" data-list="#establishments" type="text" value=""> <br/> 
 
Data ID: <span id="EducationEstablishmentDataId"></span> 
 

 
<br/><br/> 
 
paste this into input above: <b>National University of Cordoba, Argentina</b> 
 

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

和另一個當用戶鍵入它發現在數據列表該值的第一次出現：

$("#EducationEstablishment").on('input', function() { 
 
    var ids = findDataIdsInDataList($(this).data('list'), $(this).val()); 
 
    
 
    $('#EducationEstablishmentDataId').html(''); 
 
    if(ids.length > 0) { 
 
    $('#EducationEstablishmentDataId').html(ids.join(', ')); 
 
    } 
 
}); 
 

 

 
function findDataIdsInDataList(dataListSelector, search) { 
 
    var $dataList = $(dataListSelector); 
 
    if(!$dataList) return []; 
 
    
 
    var $foundOptions = $dataList.find('option').filter(function() { 
 
    return $(this) 
 
      .attr('value') 
 
      .toLowerCase() 
 
      .indexOf(search) > -1; 
 
    }); 
 
    if(!$foundOptions) return []; 
 
    
 
    var ids = []; 
 
    $foundOptions.each(function() { 
 
    var id = parseInt($(this).data('id')); 
 
    if(id) ids.push(id); 
 
    }); 
 
    return ids; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<input id="EducationEstablishment" data-list="#establishments" type="text" value=""> <br/> 
 
Data ID: <span id="EducationEstablishmentDataId"></span> 
 

 
<br/><br/> 
 
type anything: <b>Argentina</b> or <b>Insti</b> 
 

 
<datalist id="establishments"> 
 
    <option data-id="100018962" value="Instituto Tecnologico De Buenos Aires"></option> 
 
    <option data-id="100084963" value="Instituto Tecnologico De Argentina"></option> 
 
    <option data-id="100084386" value="National University of Cordoba, Argentina"></option> 
 
</datalist>

Answer 3

隨着本地JavaScript：

所有的

var x = document.getElementById(datalistInputId).value; 
var z = document.getElementById(dataListId); 
var val = z.querySelector('option[value="' + x + '"]'); 
var num = val.dataset['id'];   
return (parseInt(num) || 0);