Hide some of your field's multiple choice options based on value in other multiple choice

Help Center Get Answers
1

I have two multiple choice fields.  One is ‘Status’, and I want to hide one of the four options if the other multiple choice question hasn’t been selected (i.e. it is still blank).  These are both found on the same page.

There are a couple of posts that come close to addressing this question, but they do not address how to set the condition based on the lack of selection in the other multiple choice field.

2

Hi Brian, 

Here is some example code:


//ADD VIEW ID
$(document).on('knack-view-render.view_XXX', function(event, view, data) {
    //DROPDOWN ID
    Knack.$('#view_XXX-field_XXX').on('change', function(){
        const fieldVal = Knack.$(this).val();

        //IF FIELD VALUE IS EQUAL TO STRING
        if(fieldVal === "XXXXXXXXXX"){
            //Hide option from other dropdown. Value = the option in the dropdown you want to hide
            Knack.$('#XXX-field_XXX option[value="XXXXX"]').hide();
            //If you want to hide an entire field
            Knack.$('#field_134').hide();

        //IF FIELD VALUE IS EQUAL TO ANOTHER STRING
        }else if(fieldVal === "XXXXXXXXXX"){
            Knack.$('#view_XXX-field_XXX option[value="XXXXXX"]').show();
            Knack.$('#XXXXX').show();
        }
    })
3

Kelson - one dropdown menu has options , one of which must be selected in order for the ability to change from In Review to Approved (those are 2 of 4 lead statuses). For this reason, I don't want Approved to be in the list until they have made a selection in the other dropdow menu.

4

I can't use display rules because that only allows me to hide/show the whole multiple choice dropdown menu. Not options within the dropdown. I tried that, but maybe i missed something.

5

In the form display rules you will select hide/show or show/hide depending on how you want it to function. 

6

Hi Brian, 

If you still need help with this please reach out. I don't understand enough of your question to give you feedback. Here are my contact details:

Kelson
kelson@ksensetech.com
https://www.ksensetech.com/knack/

7

HI I need to hide one of four options in option field on a form, do you have solution for that with CSS
regards
Palmar

8

Hi guys, I have a use-case similar but different:

Company Y, Project X
Collaborators > Multiple choice options: show list of ALL collaborators of Company Y
Responsable > One choice options: show ONLY collaborators of Project X

So the Responsable dropdown must only show the selected colaborators of Project X.

This is useful for many things!

Any idea? thanks guys!

(the one or multiple choice aspect is defined in the builder object field atributes.)

9

An “easy way” to do it is to automaticaly show the selected Collaborators in the Responsable dropdown.

A more laborious way would be to compare each company collaborator in Responsable dropdown and hide it IF it does not match with one of the selected Collaborators.

10

This is a related entry that I am investigating…

11

I am working back on this funcionality.

Didn’t succeed to make work the code above on radioDependancy.
As instructed I just put the corresponding ID (field_yy is the drop down, field_zz is the radio button list in) in this line, but does nothing.
$(document).on(‘knack-view-render.view_xx’, function(event, scene, record) {
radioDependancy(“view_xx”, “field_yy”, “field_zz”);

12

Hi Michael,

I had a similar situation. I have a dropdown field (field_1253) where if the option selected is “Rent” then it hides select options in (field_2977) which are single-choice radio buttons. The following code worked for me. Hope this helps!

$(document).on(‘knack-view-render.view_2027’, function(event, view) {
const fieldToChange = ‘view_2027-field_2977’;
const optionsToHide = [‘Buyer’, ‘Seller’];

// This function hides or shows radio options based on the controlling field
const updateOptions = function() {
    const controllingValue = $('select[name="field_1253"]').val();
    const shouldHide = controllingValue === 'Rent';
    optionsToHide.forEach(option => {
        const radioOption = $(`input[name="${fieldToChange}"][value="${option}"]`);
        if (radioOption.length) {
            const parentDiv = radioOption.closest('.control');
            parentDiv.css('display', shouldHide ? 'none' : 'block');
        }
    });
};

// Attach event listener to update options when the controlling field changes
$('select[name="field_1253"]').change(updateOptions);

// Call the function to set the initial state
updateOptions();

});

1 Like
13

and if you want to hide radio-button selections based on the view you can use the following:

$(document).on(‘knack-view-render.view_2027’, function(event, view) {
const fieldToChange = ‘view_2027-field_2977’; // Change to your field ID
const optionsToHide = [‘Buyer’, ‘Seller’]; // Replace with your actual options

// This function hides or shows radio options
const updateOptions = function() {
    optionsToHide.forEach(option => {
        const radioOption = $(`input[name="${fieldToChange}"][value="${option}"]`);
        if (radioOption.length) {
            const parentDiv = radioOption.closest('.control');
            parentDiv.css('display', 'none');
        }
    });
}

updateOptions(); // Call the function when view is rendered

});

1 Like
14

Fantastic @Bbabel, I’ll try those.

thank you!!

1 Like