带多选的 Select2 下拉菜单

Posted 2023-05-08

【中文标题】带多选的 Select2 下拉菜单

【英文标题】：Select2 dropdown with multiselect

【发布时间】：2021-10-06 00:21:57

【问题描述】：

我使用 select 2 和 bootstrap 创建了一个多选下拉菜单。 所选选项列表显示在搜索框内。

我需要一些帮助来在我创建的 div 中显示选定的选项列表。 这是codepen。

My Codepen

<div class="card">
  <div class="card-header ">Availability</div>
  <div class="card-body ">

    <select name="sel" multiple="multiple" class="mul-select" onchange="fun()">

      <option value="First">First</option>
      <option value="Second">Second</option>
      <option value="Third">Third</option>
      <option value="Fourth">Fourth</option>
      <option value="Fifth">Fifth</option>
    </select>
    <div class="container display-here">
      Display selected options in this div
    </div>
  </div>
</div>

【问题讨论】：

如果您点击edit，然后点击[<>]，您可以在 SO 上发布您的代码。实际的问题是什么？您需要什么帮助？

你为什么要删除你的newest question??

【参考方案1】：

请将您的代码改成这样，希望对您有所帮助。

<div class="card">
  <div class="card-header ">Availability</div>
  <div class="card-body ">

    <select id="multipleSelect" name="sel" multiple="multiple" class="mul-select">

      <option value="First">First</option>
      <option value="Second">Second</option>
      <option value="Third">Third</option>
      <option value="Fourth">Fourth</option>
      <option value="Fifth">Fifth</option>
    </select>
    <div class="container display-here">
    
    </div>
  </div>
</div>

你的脚本如下。 我在数组中维护了值，然后将它们显示在 div 中

$(document).ready(function() 
    $(".mul-select").select2(
        placeholder: "Select options",
        tags: true,
        closeOnSelect: false

    )
);
var selectArr = [];

$('#multipleSelect').change(function() 

    var idx = $.inArray($(this).val(), selectArr);
    if (idx == -1) 
        selectArr.push($(this).val());
     else 
        selectArr.splice(idx, 1);
    
    $.each(selectArr, function(index, value) 
        $('.display-here').text(value);
    );

);

function fun(selectObj) 
    var selectedOptions = $('.mul-select option:selected').length;

    console.log(selectObj.value);


    if (selectedOptions <= 5) $(':input[type="submit"]').prop("disabled", false);
    if (selectedOptions < 1 || selectedOptions > 5) $(':input[type="submit"]').prop("disabled", true);



function func() 
    if (document.getElementsByClassName('init')[0].checked === true) console.log(true)
    else console.log(false)