Question 410854 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to pre-select option in dropdown menu with URL

I’m using a dropdown select menu which filters an html table based on the user’s selection. I would like to use the URL of the page to select one of the options. For example, if I go to the following URL: https://www.mywebsite.com/productsDropdown=producta
I would want the dropdown option to be Product A.
I’ve included the HTML and CSS below if it helps
If possible I’d like to be able to use Javascript

 <div class="filter-section">
      <div class="filter">
        <p class="filter-name">Product</p>
        <select class="dropdown" id="productsDropdown" oninput="filterTable()">
          <option>All</option>
          <option>Product A</option>
          <option>Product B</option>
          <option>Product C</option>
        </select>
      </div>
    </div>
    <!-- filter section end -->
    <!-- table start -->
    <table id="myTable">
      <tr class="header">
        <th style="width: 20%">Name</th>
        <th style="width: 40%">Description</th>
        <th style="width: 20%">Product</th>
      </tr>
      <!-- Access Requests start -->
      <!-- row start -->
      <tr>
        <td>
          <a class="request-link" href="#" target="_blank">Request A</a>
        </td>
        <td>Sit amet consectetur adipisicing elit.</td>
        <td>Product A</td>
      </tr>
      <!-- row end -->
      <!-- row start -->
      <tr>
        <td>
          <a class="request-link" href="#" target="_blank">Request B</a>
        </td>
        <td>Modi placeat quos impedit sit optio doloremque veniam expedita?</td>
        <td>Product B</td>
      </tr>
      <!-- row end -->
      <!-- row start -->
      <tr>
        <td>
          <a class="request-link" href="#" target="_blank">Request C</a>
        </td>
        <td>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</td>
        <td>Product C</td>
      </tr>
      <!-- row end -->
    </table>
    <!-- table end -->

#myInput {
  background-image: url("https://www.w3schools.com/css/searchicon.png"); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 100%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
  /* display: block;
    overflow: auto;
    height: 500px; */
}

#myTable th,
#myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

.filter-section {
  display: flex;
  margin-bottom: 6px; /* Add some space below the filters */
  gap: 12px; /* Add some space between the filters */
}

.filter-name {
  font-size: 14px; /* Increase font-size */
  color: #666666;
}

.dropdown {
  border: 1px solid #ddd; /* Add a grey border */
  border-radius: 5px;
  font-size: 16px;
  padding: 1px; /* Add padding */
}

.request-link:link,
.request-link:visited {
  text-decoration: none;
  color: #4050c7;
}

.request-link:hover,
.request-link:active {
  color: #4050c7;
}

I’ve tried several solutions I found on Stack exchange and have so far been unsuccessful. I’m hesitate to paste any code here because so far nothing has worked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up using the following code:

    var param1var = "Product A";
var param2var = "Product B";
var urlParam = window.location.href;

function displayresult() {
  if (urlParam.includes("producta")) {
    document.getElementById("productsDropdown").value = param1var;
  } else if (urlParam.includes("productb")) {
    document.getElementById("productsDropdown").value = param2var;
  }
}

window.onload = function () {
  displayresult();
  }
};

    I had some trouble with the window.onload so I ended up just removing it and calling it a different way. But this should work.


  2. 0

    An option should always have a value! If it has, you can use SelectElement.value to always get the value of the selected option.

    You need to add an addEventListener to the select and listen for change events. In modern JS you should avoid using on-attributes to keep HTML and JS independent.

    You pretty much need 2 functions (or a class with 2 methods) to either set or remove the search filter. You can use an if/else-statement for that. You also need a CSS class to actively hide a table row.
    The best tool you have is classList.toggle() which can add or remove a class based on a condition. This is especially helpful if you change the filter.

    For that functionality, an URLSearchParam is not required but can be added and I did so:

    class SearchFilter {
  #Filter;
  #HiddenRows;
  #ProductColumnPosition = 3;
  #ProductCells  = myTable.querySelectorAll(`tbody td:nth-child(${this.#ProductColumnPosition})`);
  #SearchParams = new URLSearchParams(window.location.search);

  constructor(filter) {
    this.#Filter = filter;
    this.#HiddenRows = myTable.querySelectorAll('.d-none');
  }

  setFilter() {
    this.#ProductCells.forEach(cell => {
      cell.closest('tr').classList.toggle('d-none', cell.textContent !== this.#Filter);
      this.#SearchParams.set('productFilter', this.#Filter);
    })
  }

  removeFilter() {    
    this.#HiddenRows.forEach(row => {
      row.classList.remove('d-none');
      this.#SearchParams.delete('productFilter');
    })
    if (this.#Filter === null) {
      productsDropdown.value = "all";
    }
  }
}

// runs the class on selectbox changes
productsDropdown.addEventListener('change', function() {
  updateSearchFilter(this.value);
})

// initially runs to check if a search filter exsist
window.addEventListener('DOMContentLoaded', function() {
  const SearchParams = new URLSearchParams(document.location.search);
  updateSearchFilter(SearchParams.get('productFilter'));
})


// function to run the correct SearchFilter class method
function updateSearchFilter(filter) {
  const Filter = new SearchFilter(filter);
  if (filter === 'all' || filter === null) {
    Filter.removeFilter();
  } else {
    Filter.setFilter();
  }
}
    .d-none {
  display: none;
}
    <div class="filter-section">
  <div class="filter">
    <label class="filter-name" for="productsDropdown">Product</label>
    <select class="dropdown" id="productsDropdown">
      <option value="all" selected>All</option>
      <option value="Product A">Product A</option>
      <option value="Product B">Product B</option>
      <option value="Product C">Product C</option>
    </select>
  </div>
</div>
<!-- filter section end -->
<!-- table start -->
<table id="myTable">
  <thead>
    <tr class="header">
      <th style="width: 20%">Name</th>
      <th style="width: 40%">Description</th>
      <th style="width: 20%">Product</th>
    </tr>
  </thead>
  <!-- Access Requests start -->
  <tbody>
    <!-- row start -->
    <tr>
      <td>
        <a class="request-link" href="#" target="_blank">Request A</a>
      </td>
      <td>Sit amet consectetur adipisicing elit.</td>
      <td>Product A</td>
    </tr>
    <!-- row end -->
    <!-- row start -->
    <tr>
      <td>
        <a class="request-link" href="#" target="_blank">Request B</a>
      </td>
      <td>Modi placeat quos impedit sit optio doloremque veniam expedita?</td>
      <td>Product B</td>
    </tr>
    <!-- row end -->
    <!-- row start -->
    <tr>
      <td>
        <a class="request-link" href="#" target="_blank">Request C</a>
      </td>
      <td>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</td>
      <td>Product C</td>
    </tr>
    <!-- row end -->
  </tbody>
</table>
<!-- table end -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search