禁用已选择的下拉菜单项

Question

我正在使用 choice.js 库 来管理我的下拉列表。我在同一页面上有三个具有相同的选项（选择）。我想在下拉列表中选择一个选项后禁用它，并阻止它在后续下拉列表中显示为可选选项。我该如何使用 choice.js 来做到这一点？有什么想法吗？

这是我尝试过的，但它不起作用：

<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>

Answer 1

这是一个片段，可以让您有一个初步的想法。 使用 add/removeItem 侦听器来侦听更改 并相应地更新您的共享选项池

然后在发布或采取一个选项后更新其他选择以反映阵列中的更改

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>