Блог

Главная - Вопросы по программированию - Редактируемый раскрывающийся список, в котором параметры datalist не отображаются

Редактируемый раскрывающийся список, в котором параметры datalist не отображаются

#javascript #html #jquery #css

Вопрос:

У меня есть 2 примера. Одна статика, которая работает нормально, и значения правильно отображаются в списке данных во время выполнения. В другом динамическом примере значения вообще не отображаются в списке данных во время выполнения. Я сделал их настолько идентичными, насколько мог.

Рабочий пример, JS:

 var thisListShowsUp     = ['Value1','Value2'];
var listToShow          = view.$el.find('[data-id="listToShow"]');
var thisListDoNotShowUp = []

//fetchedItemFromDBList gets populated from get request from DB. See log
fetchedItemFromDBList.forEach(function(item)
  {
  thisListDoNotShowUp.push(item.stringValue);
  });

console.log(thisListDoNotShowUp);
console.log(thisListShowsUp);

thisListShowsUp.forEach(function(item)
  {
  var option       = document.createElement('option');
  var stringValue  = item.toString();
  option.value     = stringValue
  listToShow.append(option);
  });

Не работает пример, JS:

 var thisListShowsUp     = ['Value1','Value2'];
var listToShow          = view.$el.find('[data-id="listToShow"]');
var thisListDoNotShowUp = []

//fetchedItemFromDBList gets populated from get request from DB. See log
fetchedItemFromDBList.forEach(function(item)
  {
  thisListDoNotShowUp.push(item.stringValue);
  });

console.log(thisListDoNotShowUp);
console.log(thisListShowsUp);

thisListDoNotShowUp.forEach(function(item)
  {
  var option      = document.createElement('option');
  var stringValue = item.toString();
  option.value    = stringValue

  listToShow.append(option);
   });

HTML:

 <input name="test" list="listToShow" />
<datalist id="listToShow" data-id="listToShow"></datalist>

бревно:

 ["foo1", "bar1"]
["Value1", "Value2"]

Ответ №1:

Существует конструктор для создания опции : новая опция()
Вам также необходимо использовать набор, чтобы избежать дублирования

ваш код может быть:

 const 
  displayThis = new Set(['value1','value2'])   // added values
, listToShow  = document.querySelector('datalist[data-id="listToShow"]')
, fetchedItemFromDBList =
  [ { stringValue: 'foo1' }
  , { stringValue: 'bar1' }
  ]

fetchedItemFromDBList.forEach( item => displayThis.add( item.stringValue ))

displayThis.forEach( item => listToShow.appendChild(new Option('', item ))) 
 <input name="test" list="listToShow" />
<datalist id="listToShow" data-id="listToShow"></datalist>

Комментарии:

1. Тот же результат. По-прежнему никаких видимых вариантов на выбор. Если я регистрирую datalist в консоли , внутренний HTML кажется правильным: Внутренний HTML: «<значение опции=»foo1″><значение опции=»foo1″></опция></опция><значение опции=»bar1″><значение опции=»bar1″></опция>»

2. Я попытался сделать это: var displayThis = [ ‘foo1’, ‘bar1’] fetchedItemFromDBList.forEach(функция(элемент){ displayThis .push(значение строки элемента) }); console.log(displayThis ); var listToShow = view.$el.find(‘[идентификатор данных=»listToShow»]’); displayThis . forEach(функция(элемент){ listToShow.append(новая опция(«, элемент )) }); Теперь в списке видны только «foo1» и «bar1». Все значения регистрируются

3. @SebasJun fetchedItemFromDBList уже содержит ваши displayThis ценности

Метки: ,