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

【问题标题】：show / hide form fields based on a select option (dropdown)根据选择选项（下拉菜单）显示/隐藏表单字段
【发布时间】：2015-06-10 19:48:03
【问题描述】：

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

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

由于某种原因，我被卡住了。我想把罪魁祸首归咎于我有隐藏在应该显示的元素中的类。问题是我想不出正确的方法来解决这个问题。

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

这是fiddle for method 1
这是fiddle for method 2

html

<div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">'Member Type' </label>
    <select id="reg_mem_type" name="mem_type" value="'.esc_attr($_POST['mem_type']).'">
      <option value="ARENA">ARENA</option>
      <option value="ARO">ARO</option>
      <option value="BUILD">BUILD</option>
      <option value="RM">RM</option>
      <option value="CLUBINS">CLUBINS</option>
      <option value="AFFL">AFFL</option>
      <option value="HOCKEY">HOCKEY</option>
      <option value="HOCKEYA">HOCKEYA</option>
      <option value="PRO">PRO</option>
      <option value="SKATER">SKATER</option>
      <option value="WE">WE</option>
      <option value="LINS">LINS</option>
      <option selected disabled value="Member">Member Type</option>
    </select>
  </div>



<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>
<div class="member-type bs-member-type form-row form-row-wide"><label     for="reg_last_name">'.__('Last Name', 'woocommerce').'</label>
<input type="text" class=" input-text" name="last_name" id="reg_last_name"     size="10" value" '.esc_attr($_POST['last_name']).'" /></div>
<div class="arena-member-type bs-member-type form-row form-row-wide">     <h2>company info</h2></div>
<div class="bs-member-type arena-member-type form-row form-row-wide"> <label    for="reg_website">'.__('Website' , 'woocommerce').'</label>
<input type="text" class="input-text" name="website" id="reg_website" value"     '.esc_attr($_POST['website']).'"/></div>
<div class="arena-member-type bs-member-type form-row form-row-wide">     <label for="reg_fax">'.__('Fax' , 'woocommerce').'</label>
<input type="text" class="input-text" name="fax_num" id="reg_fax" value"     '.esc_attr($_POST['fax_num']).'"/></div>

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方法2

.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;
}

js方法一

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方法二

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');
            }

        });
    });
});

【问题讨论】：

我建议hide 和show 而不是使用类来设置display。
只是我还是 css 方法 1 与 css 方法 2 相同？
同时检查输入元素的value 属性。缺少等于 = 运算符。
哎呀，你是对的..在问题中我确实粘贴了相同的 css..
查看这个 SO 答案stackoverflow.com/a/29634409/1839887

标签： javascript jquery html css wordpress

【解决方案1】：

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

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

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

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

第二个和第三个表达式总是正确的，你需要将它们与值进行比较。（即if($(this).val() == "SKATER" || $(this).val() == "HOCKEY" || $(this).val() == "HOCKEYA")）。

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

【讨论】：

丹尼，这绝对是在发挥作用。我会尝试在我的 wordpress 网站中实现它，如果它仍然有效，请告诉你。
这很好，丹尼！感谢您抽出宝贵时间帮助我。

【解决方案2】：

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

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

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

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

总是返回 true。

【讨论】：

您的答案是正确的，但是，danny 在实际答案中对其进行了更深入的解释。感谢您帮助我。

【解决方案3】：

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

$('.member-type').prop('hidden','true'); //to hide
$('.member-type').removeAttr('hidden'); //to show

【讨论】：

【解决方案4】：

试试这个：

$('select[name=mem_type]').change(function(){
    var tmp = this.value;
    $('.form-row').hide();

    if(tmp=="SKATER" || tmp=="HOCKEY" || tmp=="HOCKEYA") {
        $('.member-type').show();
    } else if(tmp=="BUILD") {
        $('.bs-member-type').show();
    } else if(tmp=="ARENA") {
        $('.arena-member-type').show();
    } else if(tmp=="PRO") {
        $('.pro-member-type').show();
    }

});

jsFiddle DEMO

【讨论】：

【解决方案5】：

我没有时间完全解决您的问题，而且我不是 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类添加到“Form-Container”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 */

您可能会为 select 选择更好的类名，因为所有大写类都不受欢迎，但如果您在其他地方需要大写，请保留它们。

【讨论】：

【解决方案6】：

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

【讨论】：