Development

Compare 4 values from select dropdowns with Javascript

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();
}
Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

1 year ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

1 year ago

FTP getting array of file details such as size using PHP

Using FTP and PHP to get an array of file details such as size and…

2 years ago

Creating Laravel form requests

Creating and using Laravel form requests to create cleaner code, separation and reusability for your…

2 years ago

Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making…

2 years ago

Laravel validation for checking if value exists in the database

Laravel validation for checking if a field value exists in the database. The validation rule…

2 years ago