How to refresh page and leave static selection?

Asked

Viewed 28 times

-1

I have a select with some options to create a filter, what happens is that when I update the select page goes back to the first option. I wish that when I update the page remains with the option I had selected before. It would be possible?

Follow the code below with the creation of select.

<div class="row">
  <div class="col-xs-12 col-md-6 col-lg-6">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-btn">
          <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            <span id="tipo-filtro">Todos</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li>
              <input data-label="Todos" checked value="all"
                id="tipo-filtro-todos" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-todos">Todos</label>
            </li>
            <li>
              <input data-label="Fornecedor" value="1"
                id="tipo-filtro-fornecedor" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-fornecedor">Fornecedor</label>
            </li>
            <li>
              <input data-label="Cliente Interno" value="2"
                id="tipo-filtro-cliente-interno" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-interno">Cliente Interno</label>
            </li>
            <li>
              <input data-label="Cliente Externo" value="3"
                id="tipo-filtro-cliente-externo" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-externo">Cliente Externo</label>
            </li>
            <li>
              <input data-label="Setor" value="4"
                id="tipo-filtro-setor" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-setor">Setor</label>
            </li>
            <li>
              <input data-label="Principal" value="5"
                id="tipo-filtro-principal" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-principal">Principal</label>
            </li>
            <li>
              <input data-label="Local" value="6"
                id="tipo-filtro-local" type="radio" name="tipo-filtro">
              <label for="tipo-filtro-local">Local</label>
            </li>
          </ul>
        </div>
        <select multiple="multiple"
          class="doNotSelect2 selectmultiple form-control requester_mult_select"
          id="solicitante_os_filtro"
          style="width: 100%;"
          name="solicitante">
        </select>
      </div>
    </div>
  </div>
javascript html

  • Yes it is possible, if you have some interaction with a database or use localStorage.

1 answer

1

Yes, you can do it using the cookies or localStorage.

Here is an example of how it can be done using the localStorage.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <select id="select">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <script>
      var select = document.getElementById("select");

      select.addEventListener("change", function(e) {
        localStorage.setItem("selected", e.target.value);
      });

      var opts = select.options;
      for (var opt, j = 0; opt = opts[j]; j++) {
        if (opt.value == localStorage.getItem("selected")) {
          select.selectedIndex = j;
          break;
        }
      }
    </script>
  </body>
</html>

It’s worth taking a look at this content on Window.localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

There’s also this question about manipulating select worth taking a look at: https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.