循环检查纯javascript中下拉列表和复选框的组合

Question

早上好！ 我有一个带有 1 个下拉菜单的页面，其中有 24 个选项可供选择。 还有 12 个复选框可供选择。 每个下拉选项和每个复选框都有一个预定义的变量。 IE。： 下拉value="utcValue0 -> var utc0 和 复选框值id="gameCheck" -> var gameTag 这里想要的输出是一个新变量var a = utc0 + gameTag;

我当前的解决方案有效，但是阅读起来非常乏味和糟糕，必须有更简单的方法来处理这个问题。我现在只是一个一个地定义每个场景。 考虑到它有 24 个下拉菜单和 12 个复选框，这不可能。 我认为它可以通过智能嵌套循环来完成，但我无法想出如何实际编写它。

非常感谢您的帮助！非常感谢！

    <select name="hourSelector" id="hourSelectorID">
      <option value="utcValue0">0 - 1 UTC</option>
      <option value="utcValue1">1 - 2 UTC</option>
      <option value="utcValue2">2 - 3 UTC</option>
      <option value="utcValue3">3 - 4 UTC</option>                
      <option value="utcValue4">4 - 5 UTC</option>
      <option value="utcValue5">5 - 6 UTC</option>
    </select>

       <input type="checkbox" class="custom-control-input" id="gameCheck">
       <input type="checkbox" class="custom-control-input" id="purchCheck">
       <input type="checkbox" class="custom-control-input" id="inputCheck">

    var utc0 = 'something';
    var utc1 = 'something';
    var utc2 = 'something';
    var utc3 = 'something';
    var utc4 = 'something';
    var utc5 = 'something';
    //var utcX = 'created>"' + todayUTC + 'T00:00:00Z"' + ' ' + 'created<"' + todayUTC + 'T01:00:00Z"';

var gameTag = 'whatever';
var purchTag = 'otherwhatever';
var eventTag = 'morewhatver';

  // grab input Hour
  var hourDropdown = document.getElementById("hourSelectorID");
  var selectedHour = hourDropdown.options[hourDropdown.selectedIndex].value;

    if (document.getElementById('gameCheck').checked) {
      if (selectedHour == 'utcValue0' ) {
        var a = utc0 + eventTag
      }
      if (selectedHour == 'utcValue1') {
        var a = utc1 + eventTag
      }
      if (selectedHour == 'utcValue2') {
        var a = utc2 + eventTag
      }
      if (selectedHour == 'utcValue3') {
        var a = utc3 + eventTag
      }
      if (selectedHour == 'utcValue4') {
        var a = utc4 + eventTag
      }
      if (selectedHour == 'utcValue5') {
        var a = utc5 + eventTag
      }
    }  

Answer 1

这是一个利用与字符串迭代匹配的选项索引的解决方案。它获取所选选项的索引并相应地更改字符串，同时连接所选复选框的值。

let dateUTC = new Date(); 
let todayUTC = dateUTC.getUTCFullYear() + '-' + (('0' + dateUTC.getUTCMonth()+1)).slice(-2) + '-' + ('0' + dateUTC.getUTCDate()).slice(-2);

const select = document.querySelector("#hourSelectorID");
const allCheckboxes = document.querySelectorAll('input[name="chkBox"]');
const elements = [...allCheckboxes, select]

elements.forEach(el => {
  el.addEventListener("change", () => {
    let checkedValues = []
    const checked  = [...allCheckboxes].filter(cb => cb.checked);
    checked.forEach(cb => checkedValues.push(cb.value))
    console.log(`created>" ${todayUTC} T0${select.selectedIndex}:00:00Z" created<" ${todayUTC} T0${select.selectedIndex+1}:00:00Z" ${checkedValues.join(' ')}`)   
  });
});

<select name="hourSelector" id="hourSelectorID">
  <option value="utcValue0">0 - 1 UTC</option>
  <option value="utcValue1">1 - 2 UTC</option>
  <option value="utcValue2">2 - 3 UTC</option>
  <option value="utcValue3">3 - 4 UTC</option>
  <option value="utcValue4">4 - 5 UTC</option>
  <option value="utcValue5">5 - 6 UTC</option>
</select>

<input value="whatever" type="checkbox" name="chkBox" class="custom-control-input" id="gameCheck">
<input value="otherwhatever" type="checkbox" name="chkBox" class="custom-control-input" id="purchCheck">
<input value="morewhatver" type="checkbox" name="chkBox" class="custom-control-input" id="inputCheck">

Answer 2

你已经改变了你的问题，所以我不确定接下来会发生什么。在下方发表评论以进行调整或问题:-)

var formEl = document.getElementById("form");
var selectEl = document.getElementById("hourSelectorID");
var checkboxEls = Array.prototype.slice.call(
  document.getElementsByClassName("custom-control-input")
);

// option elements

for (let i = 0; i < 24; i++) {
  let optionEl = document.createElement("option");
  optionEl.value = "utcValue" + i;
  optionEl.textContent = i + " - " + (i + 1) + " UTC";
  selectEl.appendChild(optionEl);
}

// form submit

formEl.addEventListener("submit", function (ev) {
  ev.preventDefault();
  console.log(toStringStuff());
});

// rename as needed :-)

function toStringStuff () {
  var now = Date.now(); // in ms
  var hourInMs = 1000 * 60 * 60;
  var dayInMs = hourInMs * 24;
  var today = now - now % dayInMs; // `now` with time set to 0
  var i = selectEl.selectedIndex; // hours to add to `today`
  var dt0 = new Date(today + i * hourInMs).toISOString();
  var dt1 = new Date(today + (i + 1) * hourInMs).toISOString();
  var utc = 'created>"' + dt0 + ' ' + 'created<"' + dt1;
  return [utc].concat(checkboxEls.filter(
    function (el) { return el.checked; }
  ).map(
    function (el) { return el.value; }
  )).join(" ");
}

<form id="form">
  <select
    id="hourSelectorID"
    name="hourSelector"
  ></select>
  <label><input
    id="gameCheck"
    type="checkbox"
    class="custom-control-input"
    value="gameTag"
    checked
  > Game Check</label>
  <label><input
    id="purchCheck"
    type="checkbox"
    class="custom-control-input"
    value="purchTag"
    checked
  > Purch Check</label>
  <input type="submit">
</form>