question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select List using Chosen Plugin not Setting Selected When Setting Rules

See original GitHub issue

I am using the setRules ability of query builder to allow users to load pre-saved searches. I also have query builder setup to use Chosen.js for multi-select lists as we are doing that elsewhere on our site. When setting the rules for a multi-select, the selected values are not being set and no selected options are showing.

Here is my setup of the plugin:

$("#advanced-search-query-builder").queryBuilder({
		sort_filters: true,
		// Override the default icons to use the FontAwesome icons.
		icons: {
			add_group: "fas fa-plus-square",
			add_rule: "fas fa-plus-circle",
			remove_group: "fas fa-minus-square",
			remove_rule: "fas fa-minus-circle",
			error: "fas fa-exclamation-triangle"
		},
		plugins: {
			"filter-description": {
				mode: "inline",
				icon: "fas fa-info-circle"
			}
		},
		filters: [
			{
				id: "Status_List_Item_Id",
				label: "Status",
				type: "integer",
				input: "select",
				multiple: true,
				operators: ["in", "not_in"],
				values: [
					{ value: "123", label: "Draft" },
					{ value: "124", label: "New" },
					{ value: "125", label: "Active" },
					{ value: "332", label: "Investigated" },
					{ value: "126", label: "Closed" },
					{ value: "325", label: "Deleted" }
				],
				plugin: "chosen",
				plugin_config: {
					// Empty
				}
			}
		]
	});
}

And here is the rule set that I am loading into query builder

{
   "condition":"AND",
   "rules":[
      {
         "id":"Status_List_Item_Id",
         "field":"Status_List_Item_Id",
         "type":"integer",
         "input":"select",
         "operator":"in",
         "value":[
            123,124
         ]
      }
   ],
   "valid":true
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
lucaspragcommented, Oct 29, 2018

FYI, I tried this using the valueSetter, it worked and here is my filter:

                id: 'product_id',
                label: 'ID',
                type: 'string',
                optgroup: 'product',
                input: 'select',
                values: products,
                plugin: 'chosen',
                operators: ['equal', 'not_equal'],
                validation: {allow_empty_value: false},
                valueSetter: function(rule, value) {
                    if (!value) return;
                    rule.$el.find('.rule-value-container select').val(value).change().trigger('chosen:updated');
                }
0reactions
mistic100commented, Aug 18, 2018

if you want to paste code, use code blocks (button is in the toolbar)

Read more comments on GitHub >

github_iconTop Results From Across the Web

jquery - chosen not working for select drop down which is not ...
Another solution is setting element width in initial method as below. $(".chosen-select1").chosen({ width:"95%" });.
Read more >
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select ...
The text to be displayed as a placeholder when no options are selected for a select. Defaults to "Select an Option" for single...
Read more >
Explain Chosen and Select2 with examples - GeeksforGeeks
Selection and Deselection. Select2 can deselect the options that are selected previously by just clicking the selected option from the dropdown ...
Read more >
jQuery Select Box Components - Chosen vs Select2 - SitePoint
These are two jQuery plugins that help style your select boxes to ... With this option set, Chosen and Select2 highlights enabled options....
Read more >
Make user friendly select element with Chosen - jQuery
Set new value using no_results_text option. $('select').chosen({no_results_text:"Not found"});. Limit selected options in Multiselect. Define ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found