使用 jQuery 在 JSON/Array/Object 中选择存储选项

Question

我希望得到以下方面的帮助：

所以，我的 HTML 结构中有这个（通过 WordPress 生成）

<select class="items">
    <option value="0" selected="selected">All Types Of Staff</option>
    <option class="level-0 main-option-1" value="12">Main Option 1</option>
    <option class="level-1 sub-option-1" value="29">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="30">Sub Option 2</option>
    <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>
    <option class="level-1 sub-option-1" value="28">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="25">Sub Option 2</option>
    <option class="level-1 sub-option-3" value="26">Sub Option 3</option>
    <option class="level-1 sub-option-4" value="27">Sub Option 4</option>
    <option class="level-0 main-option-3" value="10">Main Option 3</option>
    <option class="level-1 sub-option-1" value="22">Sub Option 1</option>
    <option class="level-1 sub-option-2" value="23">Sub Option 2</option>
</select>

理想情况下，使用 jQuery（我知道，但项目已经在使用它......）......

我想要做的是所有具有“0级”类的东西，我想添加到数组/JSON对象/我可以迭代的东西，下面有1级的东西，添加为子类型...

理想情况下存储如下内容：

{
    option {
         label: 'Main Option 1',
         items: ['Sub Option 1', 'Sub Option 2']
    },
    option: {
        label: 'Main Option 2',
        items: ['Sub Option 1', 'Sub Option 2', 'Sub Option 3', 'Sub Option 4']
    },
    option: {
        label: 'Main Option 3',
        items: ['Sub Option 1', 'Sub Option 2']
    }
}

等等，我们的想法是我们可以隐藏选择按钮，并且只有子选项可用作按钮，标签作为标题。

例如：

<h2>Main Option 1</h2>
<div class="button">Sub Option 1</div>
<div class="button">Sub Option 2</div>

<h2>Main Option 2</h2>
<div class="button">Sub Option 1</div>
<div class="button">Sub Option 2</div>
<div class="button">Sub Option 3</div>
<div class="button">Sub Option 2</div>

我对管理输出非常有信心，但我似乎无法弄清楚我应该如何或最好的方式来存储它......

有人可以帮我吗？我对 jQuery 一点都不陌生，但对自己创建 JS 对象却很陌生。

谢谢大家

Answer 1

您可以遍历您的选择中的每个level-0 选项，将它们的文本添加为​​标签，并将它们的兄弟level-1 选项文本作为项目添加到对象中。然后你可以将这些对象推送到一个数组中以生成你想要的结构：

let options = [];
$('.items option.level-0').each(function(_, el) {
  let label = $(el).text();
  let items = [];
  el = $(el).next();
  while (el.length && el.attr('class').split(/\s+/).includes('level-1')) {
    items.push(el.text());
    el = el.next();
  }
  options.push({
    label,
    items
  });
});
console.log(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="items">
  <option value="0" selected="selected">All Types Of Staff</option>
  <option class="level-0 main-option-1" value="12">Main Option 1</option>
  <option class="level-1 sub-option-1" value="29">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="30">Sub Option 2</option>
  <option class="level-0 main-option-2" value="11" selected="selected">Main Option 2</option>
  <option class="level-1 sub-option-1" value="28">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="25">Sub Option 2</option>
  <option class="level-1 sub-option-3" value="26">Sub Option 3</option>
  <option class="level-1 sub-option-4" value="27">Sub Option 4</option>
  <option class="level-0 main-option-3" value="10">Main Option 3</option>
  <option class="level-1 sub-option-1" value="22">Sub Option 1</option>
  <option class="level-1 sub-option-2" value="23">Sub Option 2</option>
</select>