I am using choice.js library to manage my drop downs. I have three on the same page with the same options(choices). I want to disable a choice, once its selected in a drop down and stop it from appearing as a selectable choice in the subsequent drop downs. How do I do so using choices.js? Any idea?
here is what i tried, but its not working :
<script>
// Initialize an array to track selected choices
let selectedChoices = [];
// Initialize Choices.js for all select elements with the 'js-choice' class
document.querySelectorAll('.js-choice').forEach(element => {
const choiceInstance = new Choices(element, {
shouldSort: false, // Prevent sorting if not needed
searchEnabled: false, // Disable the search box
placeholder: true, // Enable placeholder functionality
placeholderValue: 'Select a Question', // Set placeholder text
allowHTML: true, // Allow HTML if needed for custom placeholders
duplicateItemsAllowed: false,
itemSelectText: 'Click to select'
});
// Add event listener for 'change' event
element.addEventListener('change', function () {
const selectedValue = choiceInstance.getValue(true); // Get the selected values (only values, not full objects)
if (selectedValue.length > 0) {
const value = selectedValue[0];
// If the selected value is not already in the list, add it
if (!selectedChoices.includes(value)) {
selectedChoices.push(value);
disableChoicesInOtherDropdowns();
}
console.log('Selected values:', selectedChoices);
}
});
});
// Function to disable choices in other dropdowns
function disableChoicesInOtherDropdowns() {
// Loop through each select element with the 'js-choice' class
document.querySelectorAll('.js-choice').forEach(element => {
const choiceInstance = Choices.instances[element.id]; // Get the Choices instance
const allChoices = choiceInstance._store.getStore().choices; // Get all choices (as objects)
// Loop through all choices and disable the ones that are selected
allChoices.forEach(choice => {
// Disable choices that are in the selectedChoices array
if (selectedChoices.includes(choice.value)) {
choice.disabled = true; // Disable the choice
} else {
choice.disabled = false; // Enable choices that are not selected
}
});
// Refresh the choices display after modifying their disabled state
choiceInstance.setChoices(allChoices, 'value', 'label', true);
});
}
</script>1
Heres a snippet to give you a first idea.
Use the add/removeItem listeners to listen for changes
and update your shared options pool accordingly
then after a option was released or taken update the other selects to reflect the changes in your array
var Free_options = ["q1", "q2", "q3"]
function updateOtherSelects(MyReference){
document.querySelectorAll('.js-choice').forEach(element => {
if(MyReference != element){
// HERE YOUR CODE TO UPDATE THE OTHER SELECTS
//Choices(element).setValues(Free_options)
}
});
}
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.js-choice').forEach(element => {
const choiceInstance = new Choices(element, {
choices: Free_options,
removeItemButton: true, //Be able to remove items
removeItems: true, //Be able to remove items
closeDropdownOnSelect: 'true', //close dropdown after select
shouldSort: false, // Prevent sorting if not needed
searchEnabled: false, // Disable the search box
placeholder: true, // Enable placeholder functionality
placeholderValue: 'Select a Question', // Set placeholder text
allowHTML: true, // Allow HTML if needed for custom placeholders
duplicateItemsAllowed: false, //no duplicate items in the same selection
itemSelectText: 'Click to select' //info text on each option
});
element.addEventListener(
'addItem',
function(event) {
var item = event.detail.value;
Free_options.splice(Free_options.indexOf(item) ,1);
updateOtherSelects(event.target)
},
false,
);
element.addEventListener(
'removeItem',
function(event) {
var item = event.detail.value;
Free_options.push(item)
updateOtherSelects(event.target)
},
false,
);
})
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Include Choices CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<!-- Include Choices JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
</head>
<body>
<select id="c1" class="js-choice" multiple="multiple">
</select>
<select id="c2" class="js-choice" multiple="multiple">
</select>
<select id="c3" class="js-choice" multiple="multiple">
</select>
</body>
</html>