Question

我有一个选择下拉菜单，有许多选项可供选择。

当一个人选择一个选项时，我需要根据选择菜单更改表单字段。

出于某种原因，我被困住了。我想责怪罪魁祸首是因为我有隐藏在应该显示的元素中的类。问题在于我无法想到采用这种方法的正确方法。

值得一提的是，我使用的是WordPress，这些字段用于额外的用户注册字段。

这是documentation
这是fiddle for method 1

HTML

.member-type  {
    display: none;
}
.pro-member-type { 
    display: none;
}
.bs-member-type {
    display: none;
}
.arena-member-type {
    display: none;
}

.show-fields {
    display:block;   
}
.hidden-fields {
    display:none;
}

css-方法1

.member-type  {
    display: none;
}
.pro-member-type {
    display: none;
}
.bs-member-type {
    display: none;
}
.arena-member-type {
    display: none;
}



.show-fields {
    display:block;   
}
.hidden-fields {
    display:none;
}

css method2

jQuery(document).ready(function ($) {
    $('select[name=mem_type]').change(function () {
        // hide all optional elements
        $('.member-type').css('display', 'none');
        $('.arena-member-type').css('display', 'none');
        $('.bs-member-type').css('display', 'none');
        $('.pro-member-type').css('display', 'none');

        $("select[name=mem_type] option:selected").each(function () {
            if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA") {
                $('.member-type').css('show-fields');

            } else if ($(this).val() == "BUILD") {
                $('.bs-member-type').addclass('show-fields');

            } else if ($(this).val() == "ARENA") {
                $('.arena-member-type').addclass('show-fields');

            } else if ($(this).val() == "PRO") {
                $('.pro-member-type').addclass('show-fields');
            }

        });
    });
});

js方法1

jQuery(document).ready(function ($) {
    $('select[name=mem_type]').change(function () {
        // hide all optional elements
        $('.member-type').css('display', 'none');
        $('.arena-member-type').css('display', 'none');
        $('.bs-member-type').css('display', 'none');
        $('.pro-member-type').css('display', 'none');
        $("select[name=mem_type] option:selected").each(function () {
            if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA") {
                $('.member-type').css('display', 'block');
            } else if ($(this).val() == "BUILD") {
                $('.bs-member-type').css('display', 'block');
            } else if ($(this).val() == "ARENA") {
                $('.arena-member-type').css('display', 'block');
            } else if ($(this).val() == "PRO") {
                $('.pro-member-type').css('display', 'block');
            }

        });
    });
});

js方法2

from scipy import integrate
import numpy as np

c=1
t=0.3
## x = 0 to 1
def evalfunction(x, c, t): return 5*t*c*(0.2969*float(np.sqrt(x/c))+(-0.1260)*(x/c)+(-0.3516)*(x/c)**2+(0.2843)*(x/c)**3+(-0.1015)*(x/c)**4)
x3 = lambda x:evalfunction(x, c, t)
#x3 = lambda x: 5*t*c*(0.2969*float(np.sqrt(x/c))+(-0.1260)*(x/c)+(-0.3516)*(x/c)**2+(0.2843)*(x/c)**3+(-0.1015)*(x/c)**4)
area = integrate.quad(x3, 0, 1)
enter code here

Answer 1

我建议使用hide和show来设置显示而不是使用css。此外，以下行还有语法错误。

if ($(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA")

使用||，您基本上可以将其分解为3个单独的语句。

if ($(this).val() == "SKATER")
if("HOCKEY")
if("HOCKEYA")

第二个和第三个表达式始终为true，您需要将它们与值进行比较。（即if($(this).val() == "SKATER" || $(this).val() == "HOCKEY" || $(this).val() == "HOCKEYA")）。

我更新了您的第二个 JSFiddle 以反映这些变化。

Answer 2

我已经更新了你的小提琴。

https://jsfiddle.net/dtrm6cpr/2/

您遇到的一个问题（第一种方法）是

$(this).val() == "SKATER" || "HOCKEY" || "HOCKEYA"

总是返回true。

Answer 3

为什么不使用$('.object').show();和$('.object').hide();

Answer 4

您可以更改包含每个类的元素的隐藏属性，而不是更改CSS，例如：

Answer 5

请改为尝试：

NULL

jsFiddle DEMO

Answer 6

我没有时间完全解决你的问题，我不是一个WordPress的人，但是一眼就看出来，我认为你可以用CSS做这件事。使用您拥有的类，但使用容器来创建类上下文：

<div class="form-container"> 
    <div class="member-type bs-member-type form-row form-row-wide"> <h2>personal info</h2></div>
    <div class="member-type bs-member-type form-row form-row-wide"><label for="reg_first_name">'.__('First Name', 'woocommerce').'</label>
    <input type="text" class="input-text" name="first_name" id="reg_first_name" size="10" value" '.esc_attr($_POST['first_name']).'" /></div>
    [... code omitted for brevity ...]
</div>

现在，当更改选择框时，将CSS类添加到＆＃34; form-container＆＃34; Div提供一个新的CSS上下文：

$('select[name=mem_type]').change(function () {
    var $select = $(this), 
        $container = $('.form-container');
    $container.removeAttr('class'); // clear all classes
    $container.addClass('form-container');  // add back the form-container marker class
    $container.addClass($select.val()); // add the selected value as a class!
}

现在，您可以使用CSS来驱动隐藏的内容和显示的内容：

/* when nothing is selected, default styles hide things */
.form-container .member-type,
.form-container .arena-member-type,
.form-container .bs-member-type,
.form-container .pro-member-type {   
    display: none;
}
/* Now, have new selectors define visibility based on what classes are 
   added when a selection is made. */
/* When the BUILD class is added to the "form-container," bs-member-types
   become visible */
.form-container.BUILD .bs-member-type {
    display: block;
}
/* rinse and repeat for the others */

您可以为选择选择更好的班级名称，因为所有大写班级都不受欢迎，但如果您需要在其他地方使用大写字母，请保留＆＃39;

根据选择选项显示/隐藏表单字段（下拉列表）

6 个答案: