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

Question

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

Fiddle

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

例如。

• 点击添加按钮，然后选择全名。
• 再次点击添加。
• 第二个中不应选择全名 <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

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

要过滤掉您可以使用 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

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