jQuery 2下拉列表等于值不同的结果
jQuery 2下拉列表等于值不同的结果
提问于 2018-08-21 16:18:49
我被困在我的条件jQuery中，因为我不确定在这种情况下如何应用||和&&，或者可能需要添加其他东西。
场景：
2个具有相同选项的下拉列表，通过选择第一个(源)和第二个(目标)，将显示某些div元素。下拉列表1:苹果、橙子、香蕉下拉列表2:苹果、橙子、香蕉
当您选择dropdown 1 apple和dropdown 2 banana时，应该会显示与dropdown 1 banana和dropdown 2 apple不同的元素。这是一个简化的场景，我的真实场景两边都有40个下拉选项。
我开始做的事：
$("#div-1, #div-2").hide();
$("select[name=fruit-1],select[name=fruit-2]").change(function () {
if ($("select[name=fruit-1]").val() == "Apple"||$("select[name=fruit-2]").val() == "Banana"||$("select[name=fruit-2]").val() == "Orange") {
$("#div-1").show();
}
});
$("select[name=fruit-1],select[name=fruit-2]").change(function () {
if ($("select[name=fruit-2]").val() == "Apple"||$("select[name=fruit-1]").val() == "Banana"||$("select[name=fruit-1]").val() == "Orange") {
$("#div-2").show();
}
});由于上面的OR运算符，它现在可以与所有选项进行组合。当然，我可以使用AND运算符单独解决这个问题，但我有40x40个选项，所以我需要有组。
我如何将它们分开，使它们不会合并？
回答 1
Stack Overflow用户
发布于 2018-08-21 17:22:29
我在这里使用逻辑数组，因为您想要显示的元素可以是任何东西，逻辑组合也可以是任何东西，如下所示：
// find elements
var logic = [
{ fruit1: 'apple', fruit2: 'banana', element: '#div-1' },
{ fruit1: 'banana', fruit2: 'apple', element: '#div-2' }
];
$('.showableDiv').hide();
// Add class of fruit-dropdown to selects, just to make this a little easier to read.
$(".fruit-dropdown").on("change", function () {
// Hide all other divs? Best to add a class on them, i.e. the div-1 and div-2 classes.
$('.showableDiv').hide();
var logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-1]").val() && a.fruit2 == $("select[name=fruit-2]").val());
if(logicResult.length) $(logicResult[0].element).show();
});jsFiddle示例：https://jsfiddle.net/xpvt214o/650234/
或者...
// find elements
var logic = [
{ fruit1: 'apple', fruit2: 'banana', element: '#div-1', reverseElement: '#div-2' }
];
$('.showableDiv').hide();
// Add class of fruit-dropdown to selects, just to make this a little easier to read.
$(".fruit-dropdown").on("change", function () {
// Hide all other divs? Best to add a class on them, i.e. the div-1 and div-2 classes.
$('.showableDiv').hide();
var logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-1]").val() && a.fruit2 == $("select[name=fruit-2]").val());
if(logicResult.length) {
$(logicResult[0].element).show();
} else {
logicResult = logic.filter(a => a.fruit1 == $("select[name=fruit-2]").val() && a.fruit2 == $("select[name=fruit-1]").val());
if(logicResult.length) $(logicResult[0].reverseElement).show();
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51944464
复制相关文章
相似问题
腾讯云开发者
