Фиксирование выбранного option

Question

Просьба помочь в следующем вопросе.

window.onload = function() {
  var tab = document.querySelector('#sf'),
    tr = tab.querySelectorAll('tr:nth-child(n+2)'),
    sel = tab.querySelectorAll('select'),
    arr = [],
    res = document.querySelector('.res');

  Array.prototype.forEach.call(sel, function(a, b) {
    arr[b] = a.value;
    a.onchange = function() {
      arr[b] = a.value;
      a.options[0].selected = !0;
      Array.prototype.forEach.call(tr, function(a, b) {
        var c = Array.prototype.every.call(a.querySelectorAll("td"), function(a, b) {
          return RegExp(arr[b]).test(a.textContent)
        });
        a.style.display = c ? "" : "none"
      })
    }
  });

  res.onclick = function() {
    for (var i = 0; i < sel.length; i++) {
      sel[i].onchange()
    }
  }
}

<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <select style="width: 100%;">
        <option value="">-- Выбрать --</option>
        <option value="">Все наименования</option>
        <option value="зеленый">зеленый</option>
        <option value="красный">красный</option>
      </select>
    </td>
    <td>
      <select style="width: 100%;">
        <option value="">-- Выбрать --</option>
        <option value="">Все наименования</option>
        <option value="да">да</option>
        <option value="нет">нет</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>зеленый 1</td>
    <td>да</td>
  </tr>
  <tr>
    <td>зеленый 2</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 1</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 2</td>
    <td>да</td>
  </tr>
</table>
<input type="button" value="reset" class="res" />

Фильтр работает корректно, но есть одна проблемка. При выборе option он не сохраняется в select. Можно ли как-то исправить это, то есть что бы при выборе, например «зеленый» осталось «зеленый в шапке»?

Спасибо!

Answer 1

Немного изменил ваш код :

window.onload = function() {
  var tab = document.querySelector('#sf'),
    tr = tab.querySelectorAll('tr:nth-child(n+2)'),
    sel = tab.querySelectorAll('select'),
    arr = [],
    res = document.querySelector('.res')

  sel.forEach((a, b) => {
    arr[b] = a.value
    a.onchange = function(e) {
      arr[b] = e.target.value
      filterTable()
    }
  })

  res.onclick = function() {
    sel.forEach(s => {
      s.value = ''
      s.dispatchEvent(new Event('change'))
    })
    filterTable()
  }

  function filterTable() {
    tr.forEach((a, b) => {
      const c = [...a.querySelectorAll("td")].every((a, b) => RegExp(arr[b]).test(a.textContent))

      a.style.display = c ? "" : "none"
    })
  }
}

<table id="sf" style="width: 400px;" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <select style="width: 100%;">
        <option value="">-- Выбрать --</option>
        <option value="">Все наименования</option>
        <option value="зеленый">зеленый</option>
        <option value="красный">красный</option>
      </select>
    </td>
    <td>
      <select style="width: 100%;">
        <option value="">-- Выбрать --</option>
        <option value="">Все наименования</option>
        <option value="да">да</option>
        <option value="нет">нет</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>зеленый 1</td>
    <td>да</td>
  </tr>
  <tr>
    <td>зеленый 2</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 1</td>
    <td>нет</td>
  </tr>
  <tr>
    <td>красный 2</td>
    <td>да</td>
  </tr>
</table>
<input type="button" value="reset" class="res" />

БЛОГ НА HUSL

Фиксирование выбранного option

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