JQuery в плагине Wordpress не работает для выбора опции

Question

В настоящее время я работаю над плагином для front-end user creation, но он немного более специфичен для веб-сайта, над которым я работаю.

Часть формы, которую я использую для сбора информации, спрашиваетесли вошедший в систему пользователь хочет создать «Admin», «Manager» или «User»:

<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"), появится один из 3 следующих divs(id="adminSelect", id="managerSelect", id="userSelect"), что позволит использовать более конкретные опции для текущего пользователя.

То, что у меня есть в моем коде, не работает с js (увиделпара различных постов здесь и на других сайтах, касающихся этого), хотя я проверил, чтобы убедиться, что файл загружается, и он тоже.

Я использовал Plugin Boilerplate Generator, чтобы запустить плагин, а такжеи поместил js в файл public/js/plugin-name.js.

Answer 1

Вы дали div display: none;, что означает, что оно не будет отображаться.

Вместо использования ('#' + this.val()).show(); создайте класс с именем 'hidden' в стиле display: none;.Передайте этот класс элементам div, и если щелкнуть один из элементов div, используйте следующий код:

$( "+"this.id ).removeClass( "hidden" );

Таким образом вы удалите свойство display: none;.