时间戳

首页 > 解决方案 > Wordpress 插件中的 jQuery 不适用于选择选项

javascript - 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")中选择后，将出现以下 3 个选项之一，divs(id="adminSelect", id="managerSelect", id="userSelect")并为当前用户提供更具体的选项。

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

我Plugin Boilerplate Generator以前也启动插件并将js放在public/js/plugin-name.js文件中。

标签： javascriptjquerywordpresspluginsforms

解决方案

你给了 divs display: none;，这意味着它不会显示。

而不是使用样式('#' + this.val()).show();制作一个名为“隐藏”的类display: none;。将此类赋予 div，如果单击其中一个 div，则使用以下代码：

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

这样，您将删除该display: none;属性。

推荐阅读