Using nb_inputs: 2 with select inputs

[SlaytonNichols]

---

Title:

How to Render Dual Selects with Options in Rule_Value Section

Body:

Description:
I'm working on a project where I need a rule that requires two select inputs in the rule_value section. I'm attempting to create a rule where a user can select values from two different dropdowns. However, I'm encountering difficulties in understanding how to properly supply these select inputs with their respective options.

Code Snippet:

{
    "condition": "AND",
    "rules": [
        {
            "id": "159",
            "field": "159",
            "type": "collection_string",
            "input": "select",
            "operator": "In",
            "value": [262, 261],
            "nb_inputs": 2,
            "values": {
                0: [ /* first select options */ ],
                1: [ /* second select options */ ]
            }
        }
    ],
    "valid": true
}

Specific Issue:

I am not clear on how to populate the values object for both selects. Should these options be set in rule.filters? I need guidance on how to format this part of the configuration, specifically how to properly define and pass the option values for each select input.

Attempts:

I have looked through the documentation but couldn't find a clear example or explanation that fits this specific scenario. I also checked the provided examples and tried modifying them to suit my needs but with no success. Further I have tried passing in a values prop like the one above.

Request:

Could you provide an example or guidance on how to correctly set up dual select inputs within a rule, including how to supply each select input with a set of options? A small code example or a reference to the relevant part of the documentation would be greatly appreciated.

Environment:

jQuery-QueryBuilder version: 0.1.2
Browser: Edge 122.0.2365.52
Thank you in advance for your assistance!

[SlaytonNichols]

Found a solution by leveraging the value getter and value setter functions as well as adding a list of secondary_values to the rule.filter.

function(rule) {
    return rule.$el.find('.rule-value-container [name$=_0]').val() +
    '.' + rule.$el.find('.rule-value-container [name$=_1]').val();
}

function(rule, value) {
    if (rule.operator.nb_inputs > 0) {
        // Split the value into primary and secondary parts
        var val = value.split('.');
        // Reference to the primary and secondary selects
        var $primarySelect = rule.$el.find('.rule-value-container [name$=_0]');
        var $secondarySelect = rule.$el.find('.rule-value-container [name$=_1]');
        // Event listener for changes in the primary select
        $primarySelect.on('change', function() {
            var primaryValue = $(this).val();
            var options = rule.filter.secondary_values[primaryValue];
            // Clear existing options in the secondary select
            $secondarySelect.empty();
            // Populate new options
            if (options) {
                for (var key in options) {
                    var option = options[key];
                    var $option = $('<option></option>').val(key).text(option);
                    $secondarySelect.append($option);
                }
            }
            // Trigger a change event to set the default or first value in the secondary select
            $secondarySelect.trigger('change');
        });
        // Set the initial value of the primary select and trigger change to populate secondary
        $primarySelect.val(val[0]).trigger('change');
        // If a secondary value exists, set it as selected
        if (val.length === 2) {
            $secondarySelect.val(val[1]);
        }
    }
}