Question

我在HTML中定义了以下多选：

<div class="col-sm-10">
    <select multiple class="form-control" id="los" name="los[]">
       {leden}
    </select>
</div>

在页面加载时填充{leden}的位置。现在我想创建一个引导模式，列出多重选择中的所有选定选项。到目前为止我已经：

("#los option:selected").text()

这给了我multislect的所有textentries。但是，我无法格式化该列表。 有没有办法创建一个包含“选定选项1，选定选项2，...，选定选项x”的字符串，以便我可以在以下位置使用它：

    btn.addEventListener("click", function(e){
            showBSModal({
                title: "Controleer gegevens",
                body: "De mail zal naar de volgende groep gestuurd worden:<br>" +
                $('#aan option:selected').text() + "<br><br>" +
                "De mail wordt ook naar de volgende personen gestuurd:<br>" +
                $('#email').val() + *The string of all selected items*
            )}
   };

Answer 1

您需要使用逗号将所选选项循环并连接到字符串。

$( "#los" ).change(function() {
    var str = "";
    // loop all your selected options
    $( "#los option:selected" ).each(function() {
      // concat to a string with comma
      str += $( this ).text() + ", ";
    });
    // trim comma and white space at the end of string
    str = str.slice(0, -2);
  });

变量str将具有格式化的选定选项。

Answer 2

如果您想要自定义，请尝试：

 var mySelectedOptions = '';
 ("#los option:selected").each(function(){
    mySelectedOptions += $(this).text()+", ";
 }

然后只需使用mySelectedOptions作为格式化字符串。

Answer 3

简短更改事件，用于显示如何抓取所选元素，映射其值的数组，然后将它们连接到一个字符串中，并在它们之间加上“，”。

$('#los').on('change', function(){
  console.log($('option:selected', this).map(function(){
    return this.innerHTML;
  }).get().join(','));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple class="form-control" id="los" name="los[]">
       <option>One</option>
       <option>Two</option>
       <option>Three</option>
       <option>Four</option>
    </select>

使用JQuery

3 个答案: