Как получить значение datalist в jquery?

Question

В моем списке данных есть id и groupName. id как 1,2,3,4,5 groupName как Друг, семья, школа, колледж, сивагири.

Я показываю имя группы, пользователь выбирает имя группы, я хочу получить идентификатор для выбранной группы.

мой код:

 <div class="input-group" style="margin-bottom: 5%"> 
      <span class="input-group-addon"> <i class="fa fa-users fa-fw" 
       style="color: #ffcc33"></i></span> <input class="form-control" 
       placeholder="Select Group" id="acqGroup" list="group" /> 
      <datalist id="group"> 
      </datalist> 

     </div> 

и JSP-код:

     $.each(modelMap.distAcqGroupList, function(index, groupBO) { 
           $("#group").append($("<option></option>").text(groupBO.groupName)); 

          }); 

теперь список данных загружается полностью, и выбранное значение отображается, но я хочу, чтобы получить идентификатор для выбранного значения. я стараюсь как

    $("#acqGroup").blur(function() {   
         var group = $("#acquaintanceGroup").val(); 
         alert(group); 

        }); 

оно отображает только текст пункта выбора, я хочу идентификатор, пожалуйста, помогите мне.

js fiddle

Answer 1

Моя версия в получении имя класса выбранного варианта из DataList. Любопытное грязный хотя

$("#account-list").blur(function() { 
 
    var val = $("#account-list").val(); // get the value from #account-list 
 

 
    // for loop 
 
    var cn; 
 
    var x = document.getElementById("account-ids").options.length; //get option total = 4 
 
    for (var i = 0; i < x; i++) { 
 
    var v = document.getElementById("account-ids").options[i].value; //get values by index 
 
    if (val == v) { // compare option value from #account-list value 
 
     cn = document.getElementById("account-ids").options[i].className; // get the cname 
 
     i = x; // get ou of the loop 
 
     // cn now holds the class name of that selected option from datalist 
 
    } 
 
    } 
 
});

<div> 
 
    <input list="accounts" id="account-list" /> 
 
    <datalist id="accounts"> 
 
    <option class="1" value="Juan De Lacruz"></option> 
 
    <option class="2" value="Jan Doe"></option> 
 
    <option class="3" value="Foo Bar"></option> 
 
    <option class="4" value="Nme Name"></option> 
 
    </datalist> 
 
</div>