Multiple using selectize, option removal when already selected Asked Mar 09 '15 at 12:24 Active Mar 11 '15 at 07:02 Viewed 5,766 times 0 0 I'm new in using selectize.js, and this is the simplified version of my problem. Please see fiddle below. Fiddle What I want is not to select the item when it is already selected. Ex. click the Add button and then select the full name. click the Add again. Full name should not be selected in the second <select> or should not be visible. How will I be able to do this? 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>'; } javascript jquery html selectize.js edited Jun 20 '20 at 09:12 Community 1 1 asked Mar 09 '15 at 12:24 Adrian Enriquez 8,175 7 45 64 If you click the add button again then the first one added should hide or it can be removed from DOM? – planet260 Mar 09 '15 at 12:49 Or do you want to reset all selections when add button is clicked? – planet260 Mar 09 '15 at 12:50 @planet260 If I select the full name in the first `` it should not be visible in the second or third`` – Adrian Enriquez Mar 09 '15 at 12:52

Answer 1

So every time you are creating a new drop down you are inserting static values. By analyzing the code I see the selected value always have a class item. So what we can do is create a new array to show in dropdown and filter out the ones already selected. And then we can bind it in drop down.

To filter out you can use 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

I have not handled the condition when all are selected and you stop adding more I have just shared the code in which you can filter out the selected ones.