Как сделать фильтр по диапазону? [закрыт]

129

19 апреля 2022, 03:10

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 1 год назад.

Улучшить вопрос

помогите разобраться начинающему

у меня есть select с выбором возраста

<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
    <option value="">6</option>
    <option value="">7</option>
    <option value="">8</option>
    <option value="">9</option>
    <option value="">10</option>
</select>

и есть таблица с выводом возраста

<table>
    <tbody>
        <tr>
            <td>2-5</td>
        </tr>
        <tr>
            <td>4-7</td>
        </tr>
        <tr>
            <td>8-10</td>
        </tr>
        <tr>
            <td>1-5</td>
        </tr>
        <tr>
            <td>2-7</td>
        </tr>
        <tr>
            <td>5-9</td>
        </tr>
    </tbody>
</table>

Что нужно: Работа фильтров должна строиться на диапазоне. При выборе в select 4, выдается список с диапазонами в который входит 4. Например 1-8, 2-5 и т.д

Answer 1

В виду немногословности автора вопроса и скудности предоставленных вводных, смею предложить простейший вариант:

// В val получаем значение выбранное в select
function fCheck(val) {
  // Очищаем консоль
  console.clear();
  // Находим необходимые элементы с диапазонами и перебираем их
  [...document.querySelectorAll('td')].forEach(function(el) {
    // Создаём массив "от и до" из 
    // найденного в элементе значения, разбив его
    let aRange = el.textContent.split('-');
    // Если укладываемся в диапазон, тогда...
    if (val >= +aRange[0] && val <= +aRange[1]) {
      // Выводим значение текущего элемента в список
      console.log(el.textContent);
    }
  });
}

<select onchange="fCheck(+this.options[this.selectedIndex].textContent);">
  <option value="">1</option>
  <option value="">2</option>
  <option value="">3</option>
  <option value="">4</option>
  <option value="">5</option>
  <option value="">6</option>
  <option value="">7</option>
  <option value="">8</option>
  <option value="">9</option>
  <option value="">10</option>
</select>
<table>
  <tr><td>2-5</td></tr>
  <tr><td>4-7</td></tr>
  <tr><td>8-10</td></tr>
  <tr><td>1-5</td></tr>
  <tr><td>2-7</td></tr>
  <tr><td>5-9</td></tr>
</table>