Question 190026 in Html Question posted in
Some basic documentation can be found here.

JS and HTML select box with preselected values based on user first selection

I am developing a WebApp using HTML, JS and Python and the idea is to have some select box where the user select the first one and based on that I pre-select the others on the backend.

The rule is the following:

  • if user select A then Level 3
  • if user select B then Level 0
  • if user select C then show only Level 4 and Level 5

I started something like this:

const DGSelect = document.getElementById('DG');
const STGSelect = document.getElementById('STG');

STGSelect.value = '';
DGSelect.value = '';

function preselectSTG() {
  const selectedDGValue = DGSelect.value;

  if (selectedDGValue === 'A') {
    STGSelect.value = 'LVL 3';
  } else if (selectedDGValue === 'B') {
    STGSelect.value = 'LVL 0';
  } else if (selectedDGValue === 'C') {
    STGSelect.value = 'LVL 4';
  } else {
    STGSelect.value = '';
    DGSelect.value = '';
  }
}
<form>
  <div class="form-group">
    <label for="DG">Decision Group:</label>
    <select name="DG" id="DG">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">C</option>
    </select>
  </div>

  <div class="form-group">
    <label for="STG">STGCD:</label>
    <select name="STG" id="STG">
      <option value="LVL 0">Level 0</option>
      <option value="LVL 3">Level 3</option>
      <option value="LVL 4">Level 4</option>
      <option value="LVL 5">Level 5</option>
    </select>
  </div>
</form>
Tags:

2

Answers


  1. 0

    I don’t know if this helps,
    I just placed an event listener to make it interactive with the element.

    you write a comment below about what is missing and I will do my best to turn the code to work as required.

    const DGSelect = document.getElementById('DG');
const STGSelect = document.getElementById('STG');

STGSelect.value = '';
DGSelect.value = '';

DGSelect.addEventListener("change", preselectSTG)
function preselectSTG() {
  const selectedDGValue = DGSelect.value;

  if (selectedDGValue === 'A') {
    STGSelect.value = 'LVL 3';
  } else if (selectedDGValue === 'B') {
    STGSelect.value = 'LVL 0';
  } else if (selectedDGValue === 'C') {
    STGSelect.value = 'LVL 4';
  } else {
    STGSelect.value = '';
    DGSelect.value = '';
  }
}
    <form>
  <div class="form-group">
    <label for="DG">Decision Group:</label>
    <select name="DG" id="DG">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">C</option>
    </select>
  </div>

  <div class="form-group">
    <label for="STG">STGCD:</label>
    <select name="STG" id="STG">
      <option value="LVL 0">Level 0</option>
      <option value="LVL 3">Level 3</option>
      <option value="LVL 4">Level 4</option>
      <option value="LVL 5">Level 5</option>
    </select>
  </div>
</form>
    Login or Signup to reply.
  2. 0

    First, you need an event listener that calls the function.

    Second, the function is missing the third case, hiding levels 4 and 5.

    const DGSelect = document.getElementById('DG');
const STGSelect = document.getElementById('STG');

STGSelect.value = '';
DGSelect.value = '';

DGSelect.addEventListener("change", preselectSTG);

function preselectSTG() {
  const selectedDGValue = DGSelect.value;
  // Preselect option from STG
  if (selectedDGValue === 'A') {
    STGSelect.value = 'LVL 3';
  } else if (selectedDGValue === 'B') {
    STGSelect.value = 'LVL 0';
  } else if (selectedDGValue === 'C') {
    STGSelect.value = 'LVL 4';
  } else {
    STGSelect.value = '';
    DGSelect.value = '';
  }
  // Hide unavailable options in STG
  if (selectedDGValue === 'C') {
    document.getElementById("STG0").style.display = 'none';
    document.getElementById("STG3").style.display = 'none';
  } else {
    document.getElementById("STG0").style.display = 'block';
    document.getElementById("STG3").style.display = 'block';
  }
}
    <form>
  <div class="form-group">
    <label for="DG">Decision Group:</label>
    <select name="DG" id="DG">
      <option value="">--Select--</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </div>

  <div class="form-group">
    <label for="STG">STGCD:</label>
    <select name="STG" id="STG">
      <option value="">--Select--</option>
      <option value="LVL 0" id="STG0">Level 0</option>
      <option value="LVL 3" id="STG3">Level 3</option>
      <option value="LVL 4" id="STG4">Level 4</option>
      <option value="LVL 5" id="STG5">Level 5</option>
    </select>
  </div>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search