javascript - 动态一一添加optgroup和options

Question

我有多个根据特定条件分组的复选框:

我想填充一个分组下拉列表，如下所示:

分组下拉列表将包含图像 1 中选定的所有值(选中复选框)。单击该复选框时，我想将该复选框值添加到该特定组下的分组下拉列表中。

在我的例子中，如果用户选择问题 2 中的选项 5、选项 6 和问题 3 中的选项 9，那么我的分组下拉列表将具有如下值

Question2
  -option 5
  -option 6
Qution3
  -option 9

这里是jsfiddle link

Answer 1

您可以尝试观看复选框change事件并重复所有复选框以收集问题。然后，为选择生成 HTML。

var questions = {},
  form = $('#questionsForm'),
  checkboxes = $('.a', form),
  select = $('#dynamic');

$(document).on('change', '.a', function() {
  var i, j, item,
    data = '';

  questions = {};

  checkboxes.each(function(idx, elem) {
    item = $(elem);

    if (!item.is(':checked')) {
      return true;
    }

    if (!questions[item.data('question')]) {
      questions[item.data('question')] = [];
    }

    questions[item.data('question')].push(item.data('option'));
  });

  for (i in questions) {
    if (questions.hasOwnProperty(i)) {
      data += '<optgroup label="Question ' + i + '">';

      for (j = 0, n = questions[i].length; j < n; j++) {
        data += '<option value="' + questions[i][j] + '">' + questions[i][j] + '</option>';
      }

      data += '</optgroup>';
    }
  }

  select.html(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="questionsForm">
  <input type="checkbox" class="a" data-question="1" data-option="1" id="1" />
  <label for="1">Question1-Option1</label>
  <br/>
  <input type="checkbox" class="a" data-question="1" data-option="2" id="2" />
  <label for="2">Question1-Option2</label>
  <br/>
  <input type="checkbox" class="a" data-question="2" data-option="3" id="3" />
  <label for="3">Question2-Option3</label>
  <br/>
  <input type="checkbox" class="a" data-question="5" data-option="1" id="4" />
  <label for="4">Question5-Option1</label>
</form>

<br/>
<br/>
<select id="dynamic"></select>