Вставьте другое значение в скрытое поле ввода на основе формы выбора

Question

Мне нужно, чтобы значение «скидка» было вставлено в скрытое поле ввода на основе того, что выбрано из выбранной формы.Если выбраны опции 2, 3 или 4, то значение должно быть вставлено, если выбрано значение 1, скрытое значение ввода остается пустым.

Мне нужно сохранить текущие значения параметров, так как они также будут использоваться

<div class="form-group">
    <div class="form-inline">
      <select id="myselect" name="quantity">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <input type='hidden' id='myhidden' value=''>
    </div>
</div>

Answer 1

Один из способов добиться этого - следующий скрипт:

/* Attach a "change" event listener where the value of "myhidden" 
will be updated based on the selected option in "myselect" */
document.getElementById('myselect').addEventListener('change', (event) => {

  /* Get the current value of "myselect" as well as the hidden element */
  const mySelectValue = event.currentTarget.value;
  const hiddenElement = document.getElementById('myhidden');

  if (mySelectValue === '1') {
    /* If value of "myselect" is 1 then clear value of hidden element */
    hiddenElement.value = '';
  } else {
    /* Otherwise assign the value of "discount" to the hidden element */
    hiddenElement.value = 'discount';
  }

  console.log(`hiddenElement.value updated to ${hiddenElement.value}`);
});

<div class="form-group">
  <div class="form-inline">
    <select id="myselect" name="quantity">
      <option value="1" selected="selected">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <input type='hidden' id='myhidden' value=''>
  </div>
</div>