Comparing 4 different values from select dropdown inputs with jQuery/javascript.
Having the ability to do a comparison between up to 4 different selected values. Whilst the CodePen example only adds the name, the comparison would list comparable values (height, price etc).
This function is run on interaction with any one of the 4 inputs
function buildCompareCols(one, two, three, four) {
emptyCompareCols();
let compare_card = $("#compare-card");
compare_card.removeClass("hidden");
if (one !== "null") {
$("#compare-col-1").append(one);
} else if (one === "null") {
$("#compare-col-1").empty();
}
if (two !== "null") {
$("#compare-col-2").append(two);
} else if (two === "null") {
$("#compare-col-2").empty();
}
if (three !== "null") {
$("#compare-col-3").append(three);
} else if (three === "null") {
$("#compare-col-3").empty();
}
if (four !== "null") {
$("#compare-col-4").append(four);
} else if (four === "null") {
$("#compare-col-4").empty();
}
if (one === "null" && two === "null" && three === "null" && four === "null") {
emptyCompareCols();
compare_card.addClass("hidden");
}
}
It clears the compare columns and then will apply the values if there is a selection (not default null value).
If that column has the selection as null (nothing selected) then it is emptied.
When all four selections are null the comparison card is hidden.
The rest of the Javascript:
let option1 = "null";
let option2 = "null";
let option3 = "null";
let option4 = "null";
$("#select1").change(function () {
option1 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select2").change(function () {
option2 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select3").change(function () {
option3 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select4").change(function () {
option4 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
function emptyCompareCols() {
$("#compare-col-1").empty();
$("#compare-col-2").empty();
$("#compare-col-3").empty();
$("#compare-col-4").empty();
} A drained and empty Kennington reservoir images from a drone in early July 2024. The…
Merrimu Reservoir from drone. Click images to view larger.
Some early September spring shots from a bushwalk, It is still too early for wildflowers.
I recently needed to clone over a smaller NVMe to a 2TB SK Hynix Platinum…
If you ever needed a simple solution in Laravel to delete an entire directory and…
How to enforce only one user to register or be registered in a Laravel web…