Wordpress 插件中的 jQuery 不适用于选择选项

我目前正在为 开发一个插件front-end user creation，但它只针对我正在开发的网站。

我用来收集信息的表单的一部分，它询问当前登录的用户是否想要创建“管理员”、“经理”或“用户”：

<select class="form-control" name="userType" id="userSelection">
    <option></option>
    <option id="adminValue" value="adminSelect">Admin</option>
    <option id="managerValue" value="managerSelect">Manager</option>
    <option id="userValue" value="userSelect">User</option>
</select>

<div id="adminSelect" class="typeselection" style="display:none;">
    <div class="form-group">
        <select name="adminType" class="form-control">
            <option value="admin1">Admin1</option>
            <option value="admin2">Admin2</option>
        </select>
    </div>
</div>

<div id="managerSelect" class="typeselection" style="display:none;">
    <div class="form-group">
        <select name="managerDepartment" class="form-control">
            <option value="manager1">Manager1</option>
            <option value="manager2">Manager2</option>
        </select>
    </div>
</div>

<div id="userSelect" class="typeselection" style="display:none;">
    <div class="form-group">
        <select name="userDepartment" class="form-control">
            <option value="user1">User1</option>
            <option value="user2">User2</option>
        </select>
    </div>
</div>

至于js文件：

(function( $ ) {
'use strict';

    $('#userSelection').on('change',function(){
       ('.typeselection').hide();
       ('#' + this.val()).show();
    });

})( jQuery );

从第一个选择选项中进行选择后(name="userType")，divs(id="adminSelect", id="managerSelect", id="userSelect")将出现以下 3 个选项之一，并允许为当前用户提供更具体的选项。

我目前在我的代码中的内容不适用于 js（在这里和其他网站上看到了几个不同的帖子），但我已经检查以确保文件正在加载并且也是如此。

我曾经Plugin Boilerplate Generator也开始使用插件并将js放在public/js/plugin-name.js文件中。