JavaScript, хранить для цикла в переменной

Question

У меня такая глупая проблема, потому что jquery и javascript не так уж хороши для языков. Как вы можете видеть здесь:

        let blokla = '<select>' + 
        test = function (info) { 
            for (i = 0; i < info.length; i++) { 
                '<option>' + info[i].title + '</option>' 
            } 
        } + '</select>';

Я пытаюсь сохранить и в переменной, и между ними с помощью цикла for. Я использую эту переменную, поэтому я могу поменять ее кнопкой при нажатии на нее.

Я пытался заменить + в первой строке на, но не повезло.

Answer 1

Вы подходите к проблеме неправильно. Вместо того, чтобы пытаться определить функцию, которая зацикливается внутри строки, вы можете использовать map(), чтобы зациклить все элементы info и сгенерировать элементы <option> из этого.

var options = info.map(item => `<option>${item.title}</option>`);
let blokla = `<select>${options.join('')}</select>`;

Answer 2

В ES6 я рекомендую вам посмотреть интерполяцию строк и Array.reduce

const title = [
  'obi',
  'wan',
  'kenobi',
];

const mySelect = `<select>
  ${title.reduce((tmp, x) => `${tmp}<option>${x}</option>`, '')}
</select>`;

console.log(mySelect);

Answer 3

Не генерируйте HTML - он обычно медленнее, более подвержен ошибкам и сложнее в обслуживании. Генерировать элементы DOM программно:

const info = [
  {title: "one"},
  {title: "two"},
  {title: "three"},
  {title: "four"},
]

let blokla = document.createElement('select');

info
  .map(item => item.title) //get the titles
  .map(title => { //generate an option for each
    let option = document.createElement('option');
    option.textContent = title;
    
    return option;
  })
  .forEach(option => blokla.appendChild(option)); //add to select

//just to show what HTML this element would have
console.log(blokla.outerHTML);

//append the element
document.body.appendChild(blokla);

Или чуть более элегантно, используя jQuery:

const info = [
  {title: "one"},
  {title: "two"},
  {title: "three"},
  {title: "four"},
]

let blokla = $("<select>");

info
  .map(item => item.title) //get the titles
  .map(title => $("<option>").text(title)) //generate an option for each
  .forEach(title => title.appendTo(blokla)); //add to select

//put on the page
$(document.body)
  .append(blokla);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

Вы можете попробовать это, использовать Операторы назначения JavaScript

function selectOption(){
  var blokla = '<select>';
  for (i = 0; i < info.length; i++) { 
    blokla += '<option>' + info[i].title + '</option>' 
  } 
  blokla += "</select>";

  return blokla;
}

console.log(selectOption())

Answer 5

var data= ['one','two','three','four'];
var html = "<select>"+generateOption(data)+"/<select>";
function generateOption(data)
{
  var returnHtml = "";
  for(var i=0;i<data.length;i++)
    returnHtml += "<option>"+data[i]+"</option>";
  return returnHtml;
}
console.log(html);

Попробуйте это