在独立于下拉列表的输入中显示select2“Pillbox”

vcudknz3 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(308)

我试图在单独的输入中显示select2下拉列表中的选定选项，然后从下拉列表中删除该选项。
到目前为止，我一直采用的方法是将下拉列表设置为普通选择，然后单击，将单击选项的值添加为“选定选项输入”的新选定选项。
当我想从输入中删除一个选中的选项时，这给了我一些问题，尽管我还没有找到一种有效的方法将删除的选项添加回原始的select，并且select的其他方面非常令人讨厌。
引用鲨鱼坦克企业家的话：“必须有更好的方法！”
下面是我正在尝试做的和我正在尝试做的现有代码的模型：

function initCodeSelectTwo() {
  $('#codeDropdown').select2({
    width: "100%",
    ajax: {
      url: 'urlOne',
      dataType: 'json',
      type: 'GET',
      data: data
    }
  })

  var codeSelector = $('#codeSelector');

  $.ajax({
    type: 'GET',
    url: 'urlOne' // controller method gets options already assigned to item
  }).then((data) => {
    var option = new Option(data.Code, data.Code, true, true);
    codeSelector.trigger({
      type: 'select2: select',
      params: {
        data: data
      }, 
      multiple: true
    });
  })
}

function UpdateDropdown() {
  // using click instead of change because the dropdown has been configured to not close on click
  $('#codeDropdown').on('click', 'option', function(event) {

    var option = $(this).val();
    $('select box option[value="' + option + '"]').remove();
    $("#codeInput").append('<option value="' + option + '">' + option + '</option>');
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

我在select2文档中找不到任何关于这方面的信息，如果有任何帮助，我将不胜感激！

jquery JavaScript Html jquery-select2

来源：https://stackoverflow.com/questions/68535529/show-select2-pillboxes-in-an-input-separate-from-dropdown

1条答案

按热度按时间

wz1wpwve1#

您必须使用select2提供的事件对其进行编程。在你的情况下 select2:select 事件将捕获所选选项，然后可以对其进行编程以在另一个div中显示。
下面是一个工作示例：

//initialize select2
 $('#options').select2();

//initialize a global array to store the selected options
let selectedOptionsArray = [];

//select2 event to capture the selected value
$('#options').on('select2:select', function(e) {
  let selectedOption = e.params.data;
  let optionIndex = selectedOption.element.index;
  let optionText = selectedOption.text;
  let optionValue = selectedOption.element.value;

  //check if option already exists in the array
  let index = selectedOptionsArray.indexOf(optionValue);
  if (index !== -1) {
    //do nothing if option exists
    return false;
  }

  //else, add the option value to the array
  selectedOptionsArray.push(optionValue);

  //append the option to the desired element
  $('ul.results').append(`<li>
            <button type="button" class="remove-option" data-value="${optionValue}" data-index="${optionIndex}" title="Remove item">
              <span aria-hidden="true">&times;</span> ${optionValue}
            </button>
          </li>`);
});

//click event listener on the appended to remove it
$(document).on('click', '.remove-option', function() {
    //remove the option from global array
  let findIndex = selectedOptionsArray.indexOf($(this).attr('data-value'));
  if (findIndex !== -1) {
    selectedOptionsArray.splice(findIndex, 1);
  }

  //remove the option element
  $(this).parent().remove();        //here, parent() refers to the li 
});

//fetch the current values
$('#fetchValues').click(function() {
  console.log(selectedOptionsArray);
  $('#values').html(selectedOptionsArray);
});

select{
  display: block;
}

ul.results{
  display: flex;
  width: 200px;
  margin-top: 1rem;
  overflow: auto;
  padding: 1rem;
  background-color: #fff;
  border: 1px solid #ddd;
  list-style-type: none;
}

ul.results li{
  margin-left: 0.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<select id="options">
  <option selected disabled>Select Option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>

<ul class="results">

</ul>

<button id="fetchValues">
  Fetch Values
</button>

<div id="values"></div>

赞(0）回复(0）举报 2021-09-13

我来回答

在独立于下拉列表的输入中显示select2“Pillbox”

1条答案

相关问题

热门标签

最新问答