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

Question

I have a select dropdown menu with many options to choose from.

When a person chooses an option, I need the form fields to change according to the select menu.

For some reason, I am stuck. I would like to blame the culprit on the fact that I have classes which are hidden in the element which should be shown. The problem with that is that I cannot think of the proper way to approach this.

It is probably worth mentioning that I am using WordPress and these fields are used for extra user registration fields.

Here is a fiddle for method 1
Here is a 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- method 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

.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 method 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('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 method 2

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

        });
    });
});

Answer 1

I'd suggest using hide and show to set the display instead of using css . Additionally there is a syntax error on the following line.

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

With the || you can essentially break this down into 3 separate statements.

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

The 2nd and 3rd expressions are always true, you need to be comparing them to the value. (ie if($(this).val() == "SKATER" || $(this).val() == "HOCKEY" || $(this).val() == "HOCKEYA") ).

I updated your 2nd JSFiddle to reflect these changes.

Answer 2

I've updated your fiddle.

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

One of the problems you were having (first approach) is that

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

always returns true.

Answer 3

why not use $('.object').show(); and $('.object').hide();

Answer 4

Instead of changing the CSS you could change the hidden property of the elements that have each class, for example:

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

Answer 5

Try this instead:

$('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

Answer 6

I do not have time to fully go through your problem and I am not a WordPress person, but at a glance, I think you can do this mostly with CSS. Use the classes you have, but use a container to create a class context:

<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>

Now, when the select box is changed, add a CSS class to the "form-container" Div to provide a new CSS Context:

$('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!
}

Now, you can have CSS that drives what is hidden and what is shown:

/* 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 */

You might choose better class names for the select since all caps classes are frowned upon, but if you need the caps elsewhere, keep 'em.