多个<选择>使用选择，选项删除(已选择）

Multiple <select> using selectize, option removal when already selected

本文关键字：选择 删除 选项 多个      更新时间：2023-09-26

我是使用selectize.js的新手，这是我问题的简化版本。请参阅下面的小提琴。

小提琴

我想要的是在已经选择项目时不选择该项目。

前任。

  • 单击"添加"按钮，然后选择全名。
  • 单击添加再次。
  • 全名不应在第二个<select>中选择，或者不应可见。

我将如何做到这一点？

.HTML

<button>Add</button><br/><br/>
<div id="container"></div>

.JS

var saveAsOptions = [
        { value: 'full-name', text: 'Full Name' },
        { value: 'first-name', text: 'First Name' },
        { value: 'last-name', text: 'Last Name' }
];
var i = 1;
var $selectSaveAs;
$('button').on('click', function(){
    
    $('#container').append(generateSaveAs(i));
    
    $selectSaveAs = $('#saveAs' + i).selectize({
       options: saveAsOptions, 
       placeholder: '- Fields -'
    });
    
    i++;
});
function generateSaveAs(id){
    return '<select id="saveAs' + id + '"></select>';
}
因此，

每次创建新下拉列表时，您都会插入静态值。通过分析代码，我看到所选值始终具有类项。因此，我们可以做的是创建一个新数组以显示在下拉列表中，并过滤掉已选择的数组。然后我们可以在下拉列表中绑定它。

要过滤掉，您可以使用过滤器 

saveAsOptionsFiltered = saveAsOptions; //Initialize with your all drop down options
$(".item").each(function(index,element) {
    /*Filter out the already selected ones*/
    saveAsOptionsFiltered = saveAsOptionsFiltered.filter(function (savevalue) {return savevalue.text !== $(element).text() }); 
});

JSFiddle

当所有选择并且您停止添加更多时，我还没有处理该条件我刚刚共享了可以过滤掉所选代码的代码。

相关文章：