Question

我具有以下形式，其中包含各种复选框输入和一个具有各种选项的选择框。

当用户单击复选框时，我希望自动选择相应的选项。

示例：

当用户单击值为“ Boat Available”的“ input”时，将选择带有value="1"的“ option”。

当用户单击值为“ =“可用空间”的'输入'时，则选择值为=“ 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>

单击复选框以自动选择相应的选项

3 个答案:

演示