Categories: 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…

2 years ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

2 years ago

Early September spring shots

Some early September spring shots from a bushwalk, It is still too early for wildflowers.

3 years ago

Cloning an NVMe to SK Hynix Platinum P41 NVMe

I recently needed to clone over a smaller NVMe to a 2TB SK Hynix Platinum…

3 years ago

Using Laravel’s deleteDirectory to delete folders and their contents

If you ever needed a simple solution in Laravel to delete an entire directory and…

3 years ago

How to allow only 1 user to register in a Laravel application

How to enforce only one user to register or be registered in a Laravel web…

3 years ago