根据 jquery 的多个 select 选项显示隐藏字段

Question

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

我尝试使用此 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();

这是三个 select 盒子

<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

我在第一条评论中误解了你的代码，问题是当你阅读 "tag" 时你会隐藏 "category" 反之，这可能不是最好的解决方法问题，但可能会帮助您理解那里的问题！

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

根据 jquery 的多个 select 选项显示隐藏字段

Show hide fields based on multiple select option by jquery

jquery-select2

jquery-select2-4