Задать диапазоны значений для select из массива

Question

Сделал минимальный пример. Есть список checkox. К некоторым из них создаём select для дальнейших манипуляций. Прицепились к значению чекбокса, создали селект и встаёт задача в его заполнении. Есть варианты указания значений с "inch" и "feet", а так же, разного количества выпадающих опций. Где-то "1-5", а где-то "15-22" и т.д. В текущей конструкции я так же могу объявлять переменные, закидывать туда из selectOptions.forEach нужное количество и окончание, а затем закидывать в выбранные чекбоксы из optionsCheckbox.forEach.

Вопросов 2:

можно ли это заменить функцией, чтоб указывать не select.innerHTML = selectInch;, а что-то вроде select.innerHTML = selectOptions(1,5,"inch");, где будет сразу задан диапазон начальной и конечной цифры, ну и единицы.
Если первый вариант применим, как правильно задать в optionsCheckbox.forEach значения массивом, к которым нужно применить функцию с селектом? Например: let itemVal = [{value: "custom-1", num: func()},{..}]

Значений там не очень много, я больше времени потратил на оформление вопроса, но, в образовательных целях хочется это дело сделать именно так. Хотя бы натолкните на нужные функции или мысли. Спасибо

let addonContainer = document.querySelector('.input-container'),
  optionsCheckbox = addonContainer.querySelectorAll('.input-checkbox');

let selectOptions = Array.from({
    length: 25
  }, (_, i) => i + 1),
  selectInch = "",
  selectFeet = "";

selectOptions.forEach(function(lenght, index) {
  if (index < 5) {
    selectInch += '<option value="' + lenght + '">' + lenght + ' inch</option>';
    selectFeet += '<option value="' + lenght + '">' + lenght + ' feet</option>';
  }
});

optionsCheckbox.forEach(item => {
  if (item.value == 'custom-1') {
    let select = document.createElement('select');
    select.id = 'custom-1';
    select.innerHTML = selectInch;
    //select.style.display = 'none';
    item.parentElement.insertAdjacentElement('afterend', select);
  }

  if (item.value == 'custom-2') {
    let select = document.createElement('select');
    select.id = 'custom-2';
    select.innerHTML = selectFeet;
    //select.style.display = 'none';
    item.parentElement.insertAdjacentElement('afterend', select);
  }
});

<div class="input-container">
  <label class="inputs-name">Options</label>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-1"> Item 1</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-2"> Item 2</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-3"> Item 3</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-4"> Item 4</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-5"> Item 5</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-6"> Item 6</label>
  </p>

</div>

UPD: Первый пункт сделал таким вариантом, не знаю насколько он правильно оформлен, но, работает:

function go(start,stop,unit,options) {
    selectOptions.forEach( function(lenght, index) {
        if ( ( index >= start ) && ( index <= stop ) ) {
            options += '<option value="' + lenght + '">' + lenght + ' ' + unit + '</option>';
        }
    });
    return options;
}

Вызываем функцией go(1,5,"inch")

Answer 1

Можно создать что-то подобное. Это как вариант. Но и можно той функцией которую указали в пункте 2. В данном примере я храню объект с нужными мне данными. Ключ значения и кол-во элементов в данном селекте. Далее при получении значений из данного объекта item будет undefined или элементом для которого нужно создать селект. В результате мы избавимся от дубля кода. Далее создаёте селект и опции к нему. За место функции которую думаете создать можно просто воспользоваться reduce, но можете вынести это в отдельную функцию.

let addonContainer = document.querySelector('.input-container'),
  optionsCheckbox = addonContainer.querySelectorAll('.input-checkbox');
  
  const items = {
    "custom-1": {
      len: 5,
      key: "inch"
    },
    "custom-2": {
      len: 7,
      key: "feet"
    },
  }

const createOption = (res, key, num) => {
  res += '<option value="' + num + '">' + num + ' ' + key + '</option>';
  return res;
}

const createSelect = (item) => {
  if (!item) return;
  const select = document.createElement('select');
  select.id = item.key;
  select.innerHTML = new Array(item.len).fill(item.key).reduce(createOption, '');
  //select.style.display = 'none';
  return select;
}

optionsCheckbox.forEach(item => {
  const select = createSelect(items[item.value]);
  if (select) item.parentElement.insertAdjacentElement('afterend', select)
});

<div class="input-container">
  <label class="inputs-name">Options</label>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-1"> Item 1</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-2"> Item 2</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-3"> Item 3</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-4"> Item 4</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-5"> Item 5</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-6"> Item 6</label>
  </p>

</div>

Answer 2

Малёхо запутанное у вас объяснение :)). Если правильно понял, то плюс-минус вот так.

const generateSelect = (item) => {
  const select = document.createElement('select');
  select.id = item.id;

  for (let i = item.start; i <= item.finish; i += 1) {
    const option = new Option(`${i} ${item.type}`, i);
    select.appendChild(option);
  }

  return select;
};

const checkBoxSelectSetting = [
  { id: 'custom-1', start: 1, finish: 25, type: 'inch' },
  { id: 'custom-3', start: 5, finish: 15, type: 'feet' },
];

checkBoxSelectSetting.forEach((item) => {
  const el = document.querySelector(`input[value="${item.id}"]`);
  if (el) {
    el.parentElement.insertAdjacentElement('afterend', generateSelect(item));
  }
});

<div class="input-container">
  <label class="inputs-name">Options</label>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-1"> Item 1</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-2"> Item 2</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-3"> Item 3</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-4"> Item 4</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-5"> Item 5</label>
  </p>
  <p class="input-wrap">
    <label><input type="checkbox" class="input-checkbox" value="custom-6"> Item 6</label>
  </p>

</div>

БЛОГ НА HUSL

Задать диапазоны значений для select из массива

Ответы (2 шт):