Dependent selection JS that works with form model binding

applcation.js

var $ = jQuery;

$(document).ready(function(){
    listenForSpecialtySelect();
});

function listenForSpecialtySelect(){
    // Set initialy on load
    setSpecialtySelect();
    
    // Listen on change
    $('input[name="academic_level"]').on('change', function(){
        setSpecialtySelect();
    });
}

function setSpecialtySelect(){
    academicLevel           = $('input[name="academic_level"]:checked').val();
    academicLevelOptions    = $('select[name="specialty_id"] optgroup[label="'+academicLevel +'"] option');
    originalSelect          = $('select[name="specialty_id"]');
    filteredSelect          = $('select[name="specialty_select"]');

    // Clear the filtered select
    filteredSelect.html('');
    // Clone the option of the selected academicLevel
    academicLevelOptions.each(function(key, option){
        $(option).clone().appendTo(filteredSelect);
    });

    // Update the original select with the filteredSelect val
    // after the academicLevel is selected
    originalSelect.val(filteredSelect.val());

    // Update the originalSelect on filteredSelect change
    filteredSelect.on('change', function(){
        originalSelect.val(filteredSelect.val());
    })
}