Установите флажок, чтобы автоматически выбрать соответствующую опцию

Question

У меня есть следующая форма с различными входами для флажков и поле выбора с различными параметрами.

Когда пользователь нажимает на флажок, я хочу, чтобы соответствующий параметр автоматически выбирался.

Примеры:

Когда пользователь нажимает на «вход» со значением = «Лодка доступна», тогда выбирается «опция» с value="1".

Когда пользователь щелкаетна «входе» со значением = «Доступные пробелы» выбирается «опция» со значением = «3».

Вот форма:

<form>
  <input name="title" type="checkbox" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="checkbox" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="checkbox" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="checkbox" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="checkbox" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="checkbox" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled
</form>


<select name="epcCat[1]" class="formElements" id="category">
  <option id="101" value="1">Boat Available</option>
  <option id="103" value="3">Spaces Available</option>
  <option id="104" value="4">Fully Booked</option>
  <option id="105" value="5">Not Available</option>
  <option id="10204" value="204">Short Trips</option>
  <option id="10180" value="180">Trip Cancelled</option>
</select>

Answer 1

Я предположил, что вы заинтересованы в выборе одного варианта за раз (иначе это не имело никакого смысла).Все переключатели поменялись на переключатели, потому что вам нужно выбрать только одну категорию за раз.Также <form> обернут вокруг всего.

---

Демо

Подробности прокомментированы в демо

// Reference the <form>
var form = document.forms.main;
/*
Register the change event to form 
When <form> is changed call sync()
*/
form.onchange = sync;

// sync() passes Event Object
function sync(event) {
  // Reference all form tags under <form>
  var ui = this.elements;
  // Reference the changed radio button
  var tgt = event.target;
  // Find the radio button id and extract the number -1
  var idx = (tgt.id.split('').pop()) - 1;
  // Reference the <select>
  var cat = ui.category;
  // Reference the <option> at the position of idx
  var opt = cat.options[idx];
  // Select that <option>
  opt.selected = true;
}

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="radio" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option id="101" value="1">Boat Available</option>
    <option id="103" value="3">Spaces Available</option>
    <option id="104" value="4">Fully Booked</option>
    <option id="105" value="5">Not Available</option>
    <option id="10204" value="204">Short Trips</option>
    <option id="10180" value="180">Trip Cancelled</option>
  </select>

</form>

Answer 2

С минимальными изменениями в HTML (фактически только для того, чтобы сделать его действительным) вы можете сделать это:

Инициализация на основе раскрывающегося списка

document.getElementById("main")
  .addEventListener("change", (e) => {
    if (e.target.name == "title") document.getElementById("category").value = e.target.value;
  });
// Initialise based on dropdown
document.querySelector("[name=title][value='"+document.getElementById("category").value+"']").click();  

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="1">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="3">Spaces Available
  <input name="title" checked type="radio" class="formElements" id="title3" value="4">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="5">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="204">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="180">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option value="1">Boat Available</option>
    <option value="3">Spaces Available</option>
    <option value="4">Fully Booked</option>
    <option value="5">Not Available</option>
    <option value="204">Short Trips</option>
    <option value="180">Trip Cancelled</option>
  </select>

</form>

Инициализация по радио

document.querySelectorAll("#main [name=title]").forEach(function(chk) {
  chk.addEventListener("click", function() {
    document.getElementById("category").value = this.value;
  })
});

// initialise based on radio

document.querySelector("[name=title]:checked").click();

<form id='main'>
  <input name="title" type="radio" class="formElements" id="title1" value="1">Boat Available
  <input name="title" type="radio" class="formElements" id="title2" value="3">Spaces Available
  <input name="title" checked type="radio" class="formElements" id="title3" value="4">Fully Booked
  <input name="title" type="radio" class="formElements" id="title4" value="5">Not Available
  <input name="title" type="radio" class="formElements" id="title5" value="204">Short Trip
  <input name="title" type="radio" class="formElements" id="title6" value="180">Trip Cancelled<br>

  <select name="epcCat[1]" class="formElements" id="category">
    <option value="1">Boat Available</option>
    <option value="3">Spaces Available</option>
    <option value="4">Fully Booked</option>
    <option value="5">Not Available</option>
    <option value="204">Short Trips</option>
    <option value="180">Trip Cancelled</option>
  </select>

</form>

Answer 3

Поскольку вы используете чекбоксы (несколько из которых могут быть проверены параллельно), для того, что вам нужно, требуется select, который допускает несколько выборок, поэтому я добавил атрибут multiple:

let options = Array.from(category.querySelectorAll('option'));

document.forms[0].addEventListener('change', (e) => {
  options.find(o=>o.textContent===e.target.value).selected = e.target.checked;
})

<form>
  <input name="title" type="checkbox" class="formElements" id="title1" value="Boat Available">Boat Available
  <input name="title" type="checkbox" class="formElements" id="title2" value="Spaces Available">Spaces Available
  <input name="title" type="checkbox" class="formElements" id="title3" value="Fully Booked">Fully Booked
  <input name="title" type="checkbox" class="formElements" id="title4" value="Not Available">Not Available
  <input name="title" type="checkbox" class="formElements" id="title5" value="Short Trip">Short Trip
  <input name="title" type="checkbox" class="formElements" id="title6" value="Trip Cancelled">Trip Cancelled
</form>

<select name="epcCat[1]" class="formElements" id="category" multiple>
  <option id="101" value="1">Boat Available</option>
  <option id="103" value="3">Spaces Available</option>
  <option id="104" value="4">Fully Booked</option>
  <option id="105" value="5">Not Available</option>
  <option id="10204" value="204">Short Trip</option>
  <option id="10180" value="180">Trip Cancelled</option>
</select>