Как обнаружить выбранную опцию в списке данных, если есть дубликат? - PullRequest
Новая
       10

Как обнаружить выбранную опцию в списке данных, если есть дубликат?

0 голосов
/ 26 ноября 2018

У меня есть текст ввода типа со списком данных, который содержит повторяющиеся значения параметров 

<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
   <option value="John" data-id="1"></option>
   <option value="George" data-id="2"></option>
   <option value="John" data-id="3"></option>
</datalist>

Какие параметры я должен получить data-id при выборе параметра.Например, если я выберу второй John, чтобы получить 3 в качестве идентификатора.Я только что нашел это: 

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

, но если я выбрал второго Джона, он возвращает 1 в качестве идентификатора, что неверно.

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Я думаю, что это просто неправильный элемент для вашего случая.Если вы хотите, чтобы пользователь выбрал элемент, попробуйте элемент select.Для этого доступно множество решений.

С учетом сказанного вы можете использовать атрибут label для имен и иметь однозначные значения в value: 

<option label="John" value="1"></option>
<option label="George" value="2"></option>
<option label="John" value="3"></option>

отображает все параметры для пользователя, но фактическое значение, которое они увидят после выбора Джона, будет 1 или 3, а не Джоном.

0 голосов
/ 26 ноября 2018

Вы можете добавить индекс для дублирования опции в datalist.Таким образом, вы должны перебрать опции и в цикле выбрать любую опцию в datalist с таким же value и добавить индекс к атрибуту value. 

$("datalist option").each(function(){
  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
  sameOpt.val(function(i, val){
    return val+'-'+(sameOpt.index(this)+2);
  }); 
});


$("datalist option").each(function(){
  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");
  sameOpt.val(function(i, val){
    return val+'-'+(sameOpt.index(this)+2);
  }); 
});

$("#my-input").change(function(){
  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');
  console.log(v);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my-input" list="data-list">
<datalist id="data-list">
  <option value="John" data-id="1"></option>
  <option value="George" data-id="2"></option>
  <option value="John" data-id="3"></option>
  <option value="George" data-id="4"></option>
  <option value="John" data-id="5"></option>
</datalist>
...