Change contact form 7 select list based on another select option selection

Question

I have a contact form 7 select list

<label> Institute
    [select* Institute id:if_cips_selection "Please choose..." "AAT" "CILT" "CIPD" "CIPS" "CMI" "ILM" "IoSCM"] </label>

<label> Level
    [select* Level id:cips_level  "Please choose..." "2" "3" "4" "5" "6" "7"] </label>

What I'd like to achieve is: if CIPS is selected in the Institute list then the level options would only be 2 & 3.

I have used a couple of different javascript snippets from existing questions as here but nothing works. The javascript I have tried works in a JSfiddle environment but does not work on my WP instance. code is here.

HTML
<select id="if_cips_selection">
    <option value="AAT">AAT</option>
    <option value="CIPS">CIPS</option>
    <option value="CILT">CILT</option>
</select>

<select id="cips_level">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Script
$(document).ready(function() {

    $("#if_cips_selection").change(function() {
        var val = $(this).val();
        
        if (val == "CIPS") {
            $("#cips_level").html("<option value='1'>2</option><option value='2'>3</option>");
        } 
    });
});

Any advice would be great.

I don't think CF7 provides anything for that directly, you will probably have to write some custom JavaScript to achieve this. (And you might need to add some server-side validation via one of CF7's hooks as well, if you need to prevent that a user could manipulate the form, and sent you Institute= CIPS and Level=7.) — CBroe, Jul 13 '23 at 11:48
@CBroe thank you. I will use Javascript to get this done. I will edit my question to ask for this - I have tried a couple of different codes but nothing has worked. — OverdueOrange, Jul 13 '23 at 12:46
You need to explain what you tried, not just say that "nothing worked". Please create a [mre] with the rendered HTML of the form, and your attempt to implement the JS part. — CBroe, Jul 13 '23 at 13:21
Your selects need attribute `name` then CF7 should pick it up — Howard E, Jul 13 '23 at 17:58
The code in your fiddle already works - but only in the one direction, you will also need to restore the original options, when one of the other values gets selected. Probably easiest, if you store the original HTML content into a variable on initialization. — CBroe, Jul 14 '23 at 05:58
@HowardE thank you. I've tried adding name and its not working. am I missing something? — OverdueOrange, Jul 15 '23 at 08:26

Change contact form 7 select list based on another select option selection

0 Answers0