Filter a Connection Dropdown using another Dropdown

API & Customization Show & Tell
1

Hi

Here is a function which will filter a connection dropdown using the selection from another dropdown. Change the ‘view_xxx’ to match the view you have the two dropdowns in. Put the integers of the field_xxx for the dropdown you want to select in ‘yyyy’ and the integers of the connection field_xxx you want to filter in ‘zzzz’.

$(document).on('knack-view-render.view_xxx', function (event, view) {
  filterConxFromDropdown(view, yyyy, zzzz)
  
});
function filterConxFromDropdown(view, dropdownFieldID, conectionsFieldID) {
    //Add a change function to your select dropdown
    $('#' + view.key + '-field_' + dropdownFieldID).change(function() {
        //get selected value from dropdown
        var selectedValue = $(this).val();
        //  hide and show list items that do not contain selectedValue 
        $('#' + view.key + '_field_' + conectionsFieldID + '_chzn li').each(function() {
            //get the text of the list item
            var text = $(this).text();
            //if the text does not contain the selectedValue
            if (text.indexOf(selectedValue) == -1) {
                //hide the list item
                $(this).hide();
            } else {
                //show the list item
                $(this).show();
            }
        });
    });
}

I hope you find this useful and I’ll be happy to help if you need it.

Craig

p.s. This is the first time I have put code here so if you have any suggestions for make this clearer I would be happy to change anything.

Update - Ihave changed the function as I have made an Error the code now works

2 Likes
2

:heart: Nice work @CSWinnall will look forward to using this

2 Likes
3

Hi @Johnny_Appknowledged_UK
Just to let you know there was a typo in the code which I have now fixed in my post.
Craig

4

What kind of views will this work for as I can’t see it working with a Table/Grid

5

@DeanBozzan62116 it will only work on Form views .

It will work on a table if you link to a modal form. But you can’t have 2 fields on an inline edit.

Craig

1 Like
6

Yeah that’s what I have seen. Is it then solving a different problem from this native feature setting?

image
image1786×1217 137 KB

7

Hi @DeanBozzan62116

Yes it is, it allows you to filter a connection drop-down from a multiple choice drop-down.

Whereas what you are pointing to is filtering a connection drop-down by a connection drop-down.

Craig

2 Likes
8

Got it thanks - code could come in handy - appreciate you putting this here and explaining further

1 Like
9

Any way you could do this for an object-based filter instead of a view?

10

Hi @Camille

This function was for a very specific use case in the end which I didn’t realise.

We ended up redesigning our objects so that we could use Knacks native feature of connection based filtering.

This function can only be used if the drop-down you want to filter contains the text that you select from the first drop-down.

Craig