Multi-select Filter Checkbox with dynamic array values

61 views Asked by At

I have been trying to replicate the above Multi-select Filter Checkbox with Dynamic Array values for my project.

arr=[&callback\\ | &s\\ | action | app] this is a dynamic array that the user selected and saved this array value can change according to the users selection

This function createFiledSelectEnrich(fileds) will create a select field in the page that display dynamic key values in the options tag

function createFiledSelectEnrich(fileds) {
        var select = '<select multiple name="fieldSelected" class="form-control form-control-cust" id="fieldSelect">';
        for ( var key in fileds) {
            var option = $("<option>", {
                "value" : key
            }).text(key).data("customData", fileds[key]);
            console.log('option:' + option + ',  option.html:'
                    + option[0].outerHTML);
            select += option[0].outerHTML;
        }
        select += '</select>';
        //clear existing fields & add new fields
        $("#fieldSelectDiv").empty().append(select);
    }

This code gets the arr value from the response and convert in to array that can further processed to be able to show the value that is selected by the user earlier in the Multi-select Filter Checkbox

var enrichmentField = "${enrichmentField}";
const options = $('#fieldSelect').filterMultiSelect({
            // displayed when no options are selected
            placeholderText : "Select at-least one",
            // placeholder for search field
            filterText : "Search",
            // Select All text
            selectAllText : "Select All",
        });
        //regex remove delimiter and whitespaces 
        var arr = enrichmentField.split(/\s*\|\s*/);
        if (options) {
            arr.forEach(function(value) {
                console.log("value :", value);
                options.selectOption(value);
            });
        } else {
            console.error("Multi-select component not initialized properly");
        }

ERROR that i am facing with no output enter image description here

<label for="multiselectop" class="form-label">Multiselect</label> 
<select multiple name="multiselect" id="multiselectop">
        <option value="cheese">Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
            <option value="mushrooms">Mushrooms</option>
        <option value="pepperoni">Pepperoni</option>
        <option value="onions">Onions</option>
</select>
<script>
    $(document)
            .ready(
                    function() {

                        var arr = [ "cheese", "tomatoes", "mozarella",
                                "mushrooms", "pepperoni", "onions" ];

                        //Multi-Select: https://www.jqueryscript.net/form/multi-select-filter-checkbox.html
                        //const options = $('#multiselectop').filterMultiSelect();
                        const options = $('#multiselectop').filterMultiSelect({

                            // displayed when no options are selected
                            placeholderText : "Select at-least one",

                            // placeholder for search field
                            filterText : "Filter",

                            // Select All text
                            selectAllText : "Select All",

                        });
                        console.log(arr);

                        if (options) {
                            // Iterate over the array and select each option
                            arr.forEach(function(value) {
                                // Assuming selectOption is the method to select an option
                                options.selectOption(value);
                            });
                        } else {
                            console
                                    .error("Multi-select component not initialized properly");
                        }
</script>

Expecting the output for the Above Problem to be in this format enter image description here

Thanks for the help

0

There are 0 answers