-
Notifications
You must be signed in to change notification settings - Fork 554
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using nb_inputs: 2 with select inputs #996
Comments
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]);
}
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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!
The text was updated successfully, but these errors were encountered: