循環檢查純 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">