Параметры сохранения из выбора в JSON / Array / Object с использованием jQuery - PullRequest
Новая
       41

Параметры сохранения из выбора в JSON / Array / Object с использованием jQuery

0 голосов
/ 06 августа 2020

Я надеюсь получить некоторую помощь со следующим:

Итак, у меня это в моей структуре 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 (я знаю, но проект уже использует его ...) ...

Я хочу сделать все, что имеет класс 'level-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']
    }
}

Et c, Идея состоит в том, что мы можем затем скрыть кнопку выбора и иметь только подпараметры, доступные в виде кнопок, с метками в качестве заголовков.

например: 


<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 объектов сам.

Спасибо, ребята

1 Ответ

1 голос
/ 06 августа 2020

Вы можете перебирать каждый из level-0 параметров в выбранном вами элементе, добавляя их текст в качестве метки и тексты их родственных level-1 параметров в качестве элементов объекта. Затем вы можете поместить sh эти объекты в массив для создания нужной структуры: 

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>
...