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

Question

早上好。 我有一个带有 1 个下拉菜单的页面，其中包含 select 的 24 个选项。 select 也有 12 个复选框。 每个下拉选项和每个复选框都有一个预定义的变量。 ie:: dropdown value="utcValue0 -> var utc0 and checkbox value id="gameCheck" -> var gameTag desired output 这是一个新变量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

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

 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>

Answer 2

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

 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 = [select, ...[...allCheckboxes]]; 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">