Question

使用我要按下的按钮，将选定的项目添加到 div #list

<select class="select2" multiple="multiple" name="string_items[]" id="string_items">
  <option>value i want to append</option>
</select>

继续前进：为此（假设每个项目都是使用.append ("<div class =" item ">" + option text + "</div>") +包含每个项目的文本的模板）

<div id="list">
    <div class="item">appended value</div>
</div>

我不是JS方面的专家，但是我有自己想要的想法。我的JS代码：

$("#post-button").click(function(e){
  var items_list = $('#string_items').val(); //combo box / <select id="string_items">

  //for each item {
    //var item_tpl = '<div class="item">'+ <OPTION> TEXT </OPTION> +'</div>';   //My simple but powerful template for this example
    //$("#list").append(item_tpl); //adding to #list div
 //}

});

Answer 1

您可以尝试使用for...of循环：

for...of语句创建一个遍历可迭代对象的循环，这些对象包括：内置 String ， Array ，类似数组的对象（例如，参数或 NodeList ）， TypedArray ， Map ， Set 和用户定义的可迭代对象。它使用对象的每个不同属性的值调用要执行的语句的自定义迭代钩子。

$("#post-button").click(function(e){
  var items_list = $('#string_items').val();
  for (item of items_list){
    var item_tpl = '<div class="item"><OPTION> '+item+' </OPTION></div>';
    $("#list").append(item_tpl);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select2" multiple="multiple" name="string_items[]" id="string_items">
<option>Value 1 to append</option>
<option>Value 2 to append</option>
</select>
<button type="button" id="post-button">Post</button>
<div id="list">
    <div class="item">appended value</div>
</div>

对于select2多个中的每个选项，请使用jquery将选项值文本附加到div中

1 个答案: