多个 <select> 使用 selectize，已选择时删除选项

Question

我是 selectize.js 的新手，这是我的问题的简化版本。请参阅下面的 fiddle。

Fiddle

我想要的不是 select 已经 selected 的项目。

例如

单击 添加 按钮，然后 select 全名。
再次单击添加。
全名不应 select 在第二个 <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>';
}

Answer 1

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

要过滤掉您可以使用 filter

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

我还没有处理当所有都被选中并且你停止添加更多的情况我刚刚分享了你可以在其中过滤掉所选内容的代码。

多个 <select> 使用 selectize，已选择时删除选项

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

html

javascript

jquery

selectize.js

Fiddle