Question

我有以下三个选择框，我想在第一个选择框为空时隐藏第二个和第三个选择框，当第一个选择框包含custom-category显示第二个选择框时，当第一个选择框包含{{1}时}显示第三个选择框，当第一个选择框包含custom-tag和custom-category同时显示第二个和第三个选择框

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

custom-tag

这是三个选择框

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

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

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

1 个答案: