- https://github.com/andreww1011/filter-multi-select (Github)
- https://www.jqueryscript.net/form/multi-select-filter-checkbox.html
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

<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

Thanks for the help