根据选择选项显示隐藏表单字段(下拉列表)

根据选择选项显示隐藏表单字段(下拉列表),第1张

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

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

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

值得一提的是,我使用的是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

最佳答案:

6 个答案:

答案 0 :(得分:2)

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

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

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

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

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

    答案 1 :(得分:1)

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

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

    您遇到的一个问题(第一种方法)是

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

    总是返回true。

    答案 2 :(得分:0)

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

    答案 3 :(得分:0)

    请改为尝试:

    NULL

    jsFiddle DEMO

    答案 4 :(得分:0)

    我没有时间完全解决你的问题,我不是一个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;

    答案 5 :(得分:0)

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

    l
    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复