How to Display div if two specific select option value is selected?

May 16, 2024

I am trying to display a div/table if user select two specific option value from two select drop down list.
Example:

The first select drop down list consist of options called, Monday and tuesday.
The second select drop down list consist of options called, january and febuary.

If user select an option like "Monday" and "January", i want to show something like "Option chosing is monday and january" same thing like tuesday and january, and eccc, but for now i’m only able to print test for only one of the selection.

Here is my code:

function optionClicked() {

  let userPicked = document.getElementById("days").value;
  var div = document.getElementById("div");
  if (userPicked == '1') {
    div.innerHTML = "You clicked option 1";
  } else if (userPicked == '2') {
    div.innerHTML = "You clicked option 2.";
  } else {
    alert("No choice made.");
  }
}

<select id="days">
  <option value="1">monday</option>
  <option value="2">tuesday</option>
</select>

<select id="months">
  <option value="J">january</option>
  <option value="F">febuary</option>
</select>

<input type=button value="option chosen" onclick="optionClicked()" />
<p>

</p>

>Solution :

Here’s how to get text of the selectedIndex in a <select>

function optionClicked() {
  let days = getSelectedText(document.getElementById("days"))
  let months = getSelectedText(document.getElementById("months"))
  var div = document.getElementById("div");
  div.innerHTML = `You clicked option ${days} and ${months}`;
}

function getSelectedText(select) {
  return select.options[select.selectedIndex].text
}

<select id="days">
  <option value="1">monday</option>
  <option value="2">tuesday</option>
</select>

<select id="months">
  <option value="J">january</option>
  <option value="F">febuary</option>
</select>

<input type=button value="option chosen" onclick="optionClicked()" />
<p id="div">
</p>