将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值

Question

我正在处理使用普通 Javascript 从复选框列表中获取值，每个复选框都有一个 select 字段。

我有这个 HTML（带有三个复选框样本）

  <section class="options-list">
    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-01" id="cb-01" name="checkboxStatus"/>
      <label for="cb-01">Page Load Time</label>

      <select id="type-01" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-02" id="cb-02" name="checkboxStatus"/>
      <label for="cb-02">DB Query</label>

      <select id="type-02" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-03" id="cb-03" name="checkboxStatus"/>
      <label for="cb-03">Server Response Time</label>

      <select id="type-03" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <input type="button" id="save-data" value="Save" onclick="userChoice('checkboxStatus', 'optionStatus')"/>
  </section>

和下面的 JS 努力得到检查的元素

var checkboxes = [];

function userChoice(checkboxName, options) {

  checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), cbSelected = [];

  Array.prototype.forEach.call(checkboxes, function(el) {
    cbSelected.push(el.value);
    return cbSelected;
  });

  return cbSelected;
}

我不确定这是否是最好的方法，但剩下的部分是获取选项值和 link 到复选框。

最后，我不确定存储这些数据的最佳方式，您有什么建议？数组的数组？... [[checkboxSelected.value, option.value][checkboxSelected.value, option.value]]

...对象数组... [{状态："checked"，选项：值}{状态："checked"，选项：值}]

..或者另一个想法

Answer 1

您可以通过从每个复选框中引用来获取 select。类似于 cbSelected.parentNode.querySelector('select')。我个人会使用对象数组来存储数据，但是数组数组是可能的，或者用作映射的对象。

var model1 = [
    {
        'type' : 'checkbox',
        'id' : '01',
        'checked' : true
    },
    {
        'type' : 'select',
        'id' : '01',
        'value' : 002
    }
];

var model2 = {
    '01' : {
        'checkbox' : true,
        'option' : '002'
    },
    '02' : {
        'checkbox' : false,
        'option' : 'default'
    }
};

将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值

attach HTML-Select to Inputs and store them values once user click Save button

javascript

arrays

html-select

html-input