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.
Using FTP and PHP to get an array of file details such as size and…
Creating and using Laravel form requests to create cleaner code, separation and reusability for your…
Improving the default Laravel login and register views in such a simple manner but making…
Laravel validation for checking if a field value exists in the database. The validation rule…