Question

我想我在这里遇到了一个非常不同的情况。我有一个动态创建的HTML，看起来像这样： -

＆＃13;

var values = ['value1', 'value2', 'value3', 'value4'];

var html = [
  '<div class="panel-container">',

  '<form class="form-inline bootstrap-form-with-validation">',
  '<div class="row">',
  '<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">',
  '<select id="' + name + '">',
  '<option>Select a Facility</option>',
  '</select>',
  '</div>',
  '<div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4">',
  '<input class="input-input-row input-sign-in" placeholder="Enter Color" id="' + clr + '">',
  '</div>',
  '<div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4">',
  '<button class="btn btn-default btn-input-row pull-right" type="button" id="' + colorise + '"><span class="span-input-row glyphicon glyphicon-pencil"> </span></button>',
  '</div>',
  '</div>',
  '</form>',
  '</div>'
].join('\n');
$(_thisPanel.scrollContainer).append(html);

＆＃13;

所以现在我需要将值添加到div load的select标签上，我该怎么做？

提前致谢。

Answer 1

一种方法： -

在： -

$(_thisPanel.scrollContainer).append(html);

DO： -

$.each(values,function(key,value){

 $(_thisPanel.scrollContainer).find('.panel-container select').append('<option value="'+key+'">'+value+'</option>');
});

演示示例： -

$(document).ready(function(){
  var scrollContainer = $('#scroll_container');
  var values = ['value1', 'value2', 'value3', 'value4'];
  name ='AliveTo Die';
  clr = "Don't know";
  colorise = "Unknown";
  var html = [
    '<div class="panel-container">',

    '<form class="form-inline bootstrap-form-with-validation">',
    '<div class="row">',
    '<div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6">',
    '<select id="' + name + '">',
    '<option>Select a Facility</option>',
    '</select>',
    '</div>',
    '<div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4">',
    '<input class="input-input-row input-sign-in" placeholder="Enter Color" id="' + clr + '">',
    '</div>',
    '<div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4">',
    '<button class="btn btn-default btn-input-row pull-right" type="button" id="' + colorise + '"><span class="span-input-row glyphicon glyphicon-pencil"> </span></button>',
    '</div>',
    '</div>',
    '</form>',
    '</div>'
  ].join('\n');
  $(scrollContainer).append(html);
  $.each(values,function(key,value){
    $(scrollContainer).find('.panel-container select').append('<option value="'+key+'">'+value+'</option>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll_container"></div>

Answer 2

以下演示使用：

详情在演示

中发表

演示

＆＃13;

// Array of values for each <option> added to <select>
const colors = ['cyan', 'gold', 'tomato', 'lime'];

// Arbitrarily determined values
var selID = 'selA';
var colorIn = 'clrB';
var colorize = 'clrselC';

/* Using ES6 Template Literals to define dynamic HTML
|| Its a string with less limitations and more 
|| features than its lesser relative: String Literal.
|| Basics: Wrap in backticks: ` instead of quotes: " or '.
|| Replace this: "'+ val +'" with this: ${val}
*/
var markUp = `<div class="panel-container"><form class="form-inline bootstrap-form-with-validation"><div class="row"><div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-6"><select id="${selID}"><option>Select a Facility</option></select></div><div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4"><input class="input-input-row input-sign-in" placeholder="Enter Color" id="${colorIn}"></div><div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4"><button class="btn btn-default btn-input-row pull-right" type="button" id="${colorize}"><span class="span-input-row glyphicon glyphicon-pencil"></span></button></div></div></form></div>`;

// Reference the <main> (main#dock)
const dock = document.querySelector('main');

/* Use .insertAdjacentHTML() to render the string (markUp) 
|| into HTML
*/
dock.insertAdjacentHTML('beforeend', markUp);

// Use .map() to...
colors.map(function(val, idx) {

  // Reference the new <select>
  let sel = document.getElementById(selID);

  // Create an <option>
  let opt = document.createElement('option');

  /* Set its value to the value of the colors[] array
  || index value
  */
  opt.value = val;

  /* Set its text content to that value as well so it'll
  || be visible within the <select> once appended.
  */
  opt.textContent = val;

  // append the <option> to the <select>
  sel.appendChild(opt);
});

＆＃13;

input {
  font: inherit
}

＆＃13;

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>

<main class='container'></main>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 3

 var values = ['value1', 'value2', 'value3', 'value4'];

 var selectHTML = '';

 values.forEach(value,()={

   selectHTML+= `<option${value}</option`

 });

 var html = [

 ...

 `<select`

 ${selectHTML`

 `</select`

 ...

 ];

如何在jquery中动态创建HTML中填充Select标记

3 个答案:

演示