选择后如何删除选定的项目并在取消选择后将其取回答案

【问题标题】：How to remove choosen item once it is selected and get it back once unselected选择后如何删除选定的项目并在取消选择后将其取回
【发布时间】：2020-11-05 06:28:46
【问题描述】：

您好，我在实现选择/取消选择时遇到问题，我正在使用https://harvesthq.github.io/chosen/

问题：我想在选中后从下拉列表中删除项目，并在取消选中后将其取回

这是我的图片显示问题：

下面是我选择的全部代码：

$('.chosen-select').chosen({}).change( function(obj, result) {
    //console.debug("changed: %o", arguments);
    
    console.log("selected: " + result.selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
<div>
<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
            <option value=""></option>
            <option value="Any">[Any]</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>

          </select>    
</div>

【问题讨论】：

为什么？你目前的残疾人工作得很好。你可以做一个feature request
@mplungjan 工作正常，500 个项目很难选择

标签： javascript jquery jquery-chosen

【解决方案1】：

li.result-selected { display:none !important; }

我尝试的其他东西没有用，但 CSS 更改工作正常：

$('.chosen-select').chosen({}).change(function(obj, result) {
  console.log("selected: " + result.selected);

  /* None of this works. The CSS does work
      const vals = $(".chosen-select").val();
        $('.chosen-select').find("option[value='"+result.selected+"']").remove()
        console.log(vals)
        $(".chosen-select").val(vals);      
            //  $('.chosen-select').trigger("chosen:updated");
  */
});

li.result-selected {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<div>
  <select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option value=""></option>
    <option value="Any">[Any]</option>
    <option value="United States">United States</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Aland Islands">Aland Islands</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>

  </select>
</div>

这是一个相关的问题jQuery Chosen - update select list without losing selections 没有帮助

【讨论】：