jQuery数组的concat数据

Question

我有一个包含许多option标签的数组，如此

如何concat将它们变成字符串，然后将其变成select块？

喜欢这个

var select_block = '<select id="mission_reward" name="mission_reward" class="select_reward">';

// Maybe write something to concat array into string ?
select_block = select_block + options;  // options is an array contains many option tags
select_block = select_block + '</select>';

Answer 1

您可以使用jQuery()

var select = $("<select></select>", {
               id: "mission_reward",
               name: "mission_reward",
               "class": "select_reward",
               html: options
             });

Answer 2

如果你正在使用jQuery，你根本不需要将它们连接成一个字符串。您可以添加DOME元素数组：

var options = [ /* your option elements */ ];
var $select_block = $('<select id="mission_reward" name="mission_reward" class="select_reward" />');
$select_block.append(options);

Answer 3

要使用非jQuery JavaScript创建HTML字符串，您可以使用以下方法：

// here we create a string of HTML, using a String literal,
// and concatenate that String with another:
var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' +

  // here we use Array.prototype.join() to combine the
  // Array elements of the options Array (an Array of
  // Strings) together using a zero-length string:
  options.join('') +

  // and then concatenate the String-so-far with the final
  // String to close the resulting <select> element:
  '</select>';

// creating the options Array:
var options = ['<option name="demo">opt1</option>', '<option name="demo">opt2</option>', '<option name="demo">opt3</option>']


var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' + options.join('') + '</select>';

document.body.insertAdjacentHTML('beforeend', html);

JS Fiddle demo

只有在options数组元素是字符串时才可以这样做。如果它们是DOM节点，那么您可以使用以下代码（再次创建一个HTML字符串）：

// similarly to the above approach, we have a String literal
// to open the resulting <select> element, and then we use
// Array.prototype.join() to create a String from the
// options Array-elements:
var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' +

  // here we have an Array of HTMLOptionElements, which we must
  // convert to Strings, comprised of their own HTML, so
  // we use an Arrow function to change the Array,
  // map takes the current Array-element ('opt') and returns
  // the outerHTML of that node to the Array, and then the
  // resulting Array of HTML-Strings is joined together to
  // form an HTML-String:
  options.map( opt => opt.outerHTML ).join('') +

  // and again closing the resulting <select> element:
  '</select>';

// creating the options Array:
var options = new Array(3).fill('').map(function(_, i) {
  var o = document.createElement('option');
  o.value = 'demo';
  o.text = 'opt' + i;
  return o;
});

var html = '<select id="mission_reward" name="mission_reward" class="select_reward">' + options.map(opt => opt.outerHTML).join('') + '</select>';

document.body.insertAdjacentHTML('beforeend', html);

然而，使用DOM创建可插入文档的节点通常更好，而不是创建字符串。要使用创建节点的DOM API方法，可以使用以下内容（尽管更详细）：

// here we directly create a <select> element:
var selectElement = document.createElement('select');

// set its 'id' and 'name' to the String of 'mission_reward':
selectElement.id = selectElement.name = 'mission_reward';

// add the 'select_reward' class-name:
selectElement.classList.add('select_reward');

// iterate over the options Array and, on each iteration,
// append the current <option> ('opt') to the created 
// <select> element:
options.forEach( opt => selectElement.appendChild(opt) );

// creating the options Array:
var options = new Array(3).fill('').map(function(_, i) {
  var o = document.createElement('option');
  o.value = 'demo';
  o.text = 'opt' + i;
  return o;
});

var selectElement = document.createElement('select');

selectElement.id = selectElement.name = 'mission_reward';
selectElement.classList.add('select_reward');

options.forEach(opt => selectElement.appendChild(opt));

document.body.appendChild(selectElement);

Answer 4

您想为数组的每个选项选择一个选项吗？那么你肯定想要应用forEach()方法：

var opt = ['option A', 'Option B', 'Option C'];
var select_block = '<select id="mission_reward" name="mission_reward" class="select_reward">';

opt.forEach(function(element) {
    // crude code follows ;)
    select_block +="<option value='"+element+"'>"+element+"</option>";
});
select_block +="</select>";