Show hide fields based on multiple select option by jquery

Question

I have these three select boxes below, I want when first select box empty, hide second and third select boxes, When first select box contains custom-category show second select box, When first select box contains custom-tag show third select box, When first select box contains custom-category and custom-tag in same time show second and third select boxes

I try to this jquery code but not work for all case that described above

$('.field-content-multiple select').change(function() {
$(this).find('option:selected').each(function() {
    if($(this).attr('value') == 'custom-category') {
        $('p.field-custom-category').show();
        $('p.field-custom-tag').hide();
    } else if($(this).attr('value') == 'custom-tag') {
        $('p.field-custom-tag').show();
        $('p.field-custom-category').hide();
    } else {
        $('p.field-custom-category').hide();
        $('p.field-custom-tag').hide();
    }
});
}).change();

these are the three select boxes

<p class="field-content-multiple description description-wide">
<select name="menu-item-content-multiple[<?php echo $item_id; ?>][]" id="edit-menu-item-content-multiple-<?php echo $item_id; ?>" class="widefat code edit-menu-item-content-multiple bsnselect" multiple>
        <?php foreach (self::$YPE_multiple as $key => $value): ?>
            <option value="<?php echo $key; ?>"  <?php echo  selected(in_array($key, $item->content_multiple)); ?>><?php echo $value;?>  </option>
        <?php endforeach ?>
</select>
</p>

<p class="field-custom-category description description-wide">
<label for="edit-menu-item-custom-category-<?php echo $item_id; ?>">
    <?php _e( 'Select specific categories' ); ?><br />
    <select name="menu-item-custom-category[<?php echo $item_id; ?>][]" id="edit-menu-item-custom-category-<?php echo $item_id; ?>" class="widefat code edit-menu-item-custom-category bsnselect" multiple>
        <?php
            $YPE_cats = get_categories();
            foreach ($YPE_cats as $YPE_cat) { ?>
                <option value="<?php echo $YPE_cat->slug; ?>"  <?php echo  selected(in_array($YPE_cat->slug, $item->custom_category)); ?>><?php echo  $YPE_cat->name;?></option><?php
            }
        ?>
    </select>
</label>
</p>

<p class="field-custom-tag description description-wide">
<label for="edit-menu-item-custom-tag-<?php echo $item_id; ?>">
    <?php _e( 'Select specific tags' ); ?><br />
    <select name="menu-item-custom-tag[<?php echo $item_id; ?>][]" id="edit- menu-item-custom-tag-<?php echo $item_id; ?>" class="widefat code edit-menu- item-custom-tag bsnselect" multiple>
        <?php
            $YPE_tags = get_tags();
            foreach ($YPE_tags as $YPE_tag) { ?>
                <option value="<?php echo $YPE_tag->slug; ?>" <?php echo  selected(in_array($YPE_tag->slug, $item->custom_tag)); ?>><?php echo $YPE_tag->name;?></option><?php
            }
        ?>
    </select>
</label>
</p>

Possible duplicate of How to show form input fields based on select value? — thekodester
– thekodester, Commented Nov 28, 2016 at 18:26

rule · Accepted Answer · 2016-11-28 18:45:11Z

1

i missunderstood your code in the first comment, the problem is that when you read the "tag" you will hide the "category" and the other way around, this might not be the best work around to the problem, but might help you understand the problem there!

var categoryFlag = false;
var tagFlag = false;

$(this).find('option:selected').each(function() {
    if($(this).attr('value') == 'custom-category') {
       categoryFlag = true;
    } else if($(this).attr('value') == 'custom-tag') {
       tagFlag = true;
    }
});

if(categoryFlag && tagFlag) {
    $('p.field-custom-category').show();
    $('p.field-custom-tag').show();   
    categoryFlag = false;
    tagFlag = false;
} else if(categoryFlag && !tagFlag) {
    $('p.field-custom-category').show();
    $('p.field-custom-tag').hide();
    categoryFlag = false;
    tagFlag = false;
} else if(!categoryFlag && tagFlag) {
    $('p.field-custom-category').hide();
    $('p.field-custom-tag').show();
    categoryFlag = false;
    tagFlag = false;
} else {
    $('p.field-custom-category').hide();
    $('p.field-custom-tag').hide();
    categoryFlag = false;
    tagFlag = false;
}

edited Nov 28, 2016 at 18:45

answered Nov 28, 2016 at 17:56

rule

2811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

SAFEEN 1990 Over a year ago

I use the Select2 jquery plugin for select boxes for example when only I select custom-category then show second select box but when I deselect the custom-category not hide the second select box

rule Over a year ago

oh you are right , i am not reseting the values on categoryFlag and tagFlag , try in the last section of if eles resetting the values, i ll update the anwser.

SAFEEN 1990 Over a year ago

Thanks so much your code work perfectly. But I want before apply jquery change() function don't show second and third select boxes. But in your code before apply change() function shows second and third select boxes

rule Over a year ago

sorry just saw now that you have said something, you can just start by hiding them in the beggining of your code, and that would solve the problem. like just calling $('p.field-custom-category').hide(); $('p.field-custom-tag').hide();

SAFEEN 1990 Over a year ago

yes, I can do that. I hide the second and third select box before applying the change function until now not a problem. For example when I select the custom-tag directly show third select box but when I save the page then refresh it don't appear third select box? means only appear when to apply changes I want when to apply the change and selected custom-tag never hide the third select box after save and refresh the page

Collectives™ on Stack Overflow

Show hide fields based on multiple select option by jquery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related