通过jquery显示基于多选选项的隐藏字段

Question

我下面有这三个选择框，我想当第一个选择框为空时，隐藏第二个和第三个选择框，当第一个选择框包含custom-category时显示第二个选择框，当第一个选择框包含custom-tag时显示第三个选择框box，当第一个选择框同时包含custom-category和custom-tag时显示第二个和第三个选择框

我尝试使用此 jquery 代码，但不适用于上述所有情况

$('.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();

这是三个选择框

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

Answer 1

我在第一条评论中误解了您的代码，问题是当您阅读“标签”时，您将隐藏“类别”，反之亦然，这可能不是解决问题的最佳方法，但可能帮助您了解那里的问题！

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