Guide to automatically select an option in a dropdown menu using a URL

Question

Guide to automatically select an option in a dropdown menu using a URL

I am currently working on implementing a dropdown select menu that helps filter an HTML table based on the user's choice. My goal is to utilize the URL of the page to automatically pre-select an option in the dropdown. For instance, if the URL looks like this: , then I want the dropdown option to be set to Product A. I have shared the HTML and CSS code below for reference. If possible, I would prefer to achieve this functionality using 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 have attempted various solutions found on Stack Exchange but have not been successful so far. I am hesitant to share any code here as nothing has worked for me yet.

javascript html jquery css

Answer 1

Answer №1

Remember to always assign a value to an option! To retrieve the selected option's value, you can utilize SelectElement.value.

To handle changes in the select element, it's recommended to use addEventListener and listen for change events. It's best practice in modern JS to avoid using inline event attributes to maintain separation between HTML and JS.

You will likely need two functions (or methods within a class) to apply or remove the search filter. An if/else statement can help with this process. Additionally, a CSS class should be used to dynamically hide table rows.
An excellent tool to toggle classes based on conditions is classList.toggle(), especially useful when adjusting filters.

While not mandatory, including an URLSearchParams can be beneficial as demonstrated below:

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 -->

Answer 2

Remember to always assign a value to an option! To retrieve the selected option's value, you can utilize SelectElement.value.

To handle changes in the select element, it's recommended to use addEventListener and listen for change events. It's best practice in modern JS to avoid using inline event attributes to maintain separation between HTML and JS.

You will likely need two functions (or methods within a class) to apply or remove the search filter. An if/else statement can help with this process. Additionally, a CSS class should be used to dynamically hide table rows.
An excellent tool to toggle classes based on conditions is classList.toggle(), especially useful when adjusting filters.

While not mandatory, including an URLSearchParams can be beneficial as demonstrated below:

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 -->

Answer 3

Answer №2

After some trial and error, I managed to implement the code below:

let product1 = "Product A";
let product2 = "Product B";
const urlParam = window.location.href;

function displaySelectedProduct() {
  if (urlParam.includes("producta")) {
    document.getElementById("productsDropdown").value = product1;
  } else if (urlParam.includes("productb")) {
    document.getElementById("productsDropdown").value = product2;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  displaySelectedProduct();
});

I encountered some issues with the window.onload event, so I opted to remove it and find an alternative solution. However, the revised implementation should function correctly.

Answer 4

After some trial and error, I managed to implement the code below:

let product1 = "Product A";
let product2 = "Product B";
const urlParam = window.location.href;

function displaySelectedProduct() {
  if (urlParam.includes("producta")) {
    document.getElementById("productsDropdown").value = product1;
  } else if (urlParam.includes("productb")) {
    document.getElementById("productsDropdown").value = product2;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  displaySelectedProduct();
});

I encountered some issues with the window.onload event, so I opted to remove it and find an alternative solution. However, the revised implementation should function correctly.

Guide to automatically select an option in a dropdown menu using a URL

Answer №1

Answer №2

Similar questions

"Unexpected end of input encountered while attempting to parse JSON data using JSON.parse

Steps to insert a column within an HTML document for PDF printing

Puppeteer experiencing issues with missing relative modules and dependencies not being found

Having trouble sending ajax requests in Node.js?

The issue of the hamburger icon appearing as "X" seems to only affect certain mobile phones, while it displays correctly on desktops and most other mobile devices. The problem appears to be specifically

What is the CSS selector used to target elements that are not contained within another selector?

The Mystery of Bootstrap 4 Column Sequence

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

Tips on avoiding redirection when submitting a form

Using selected option from dropdown as a value for a hyperlink

Error in Next.js: The function (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_1__.onAuthStateChanged) is not defined as a function

The step-by-step guide on displaying API choices in an Autocomplete feature and keeping them up

Leveraging Jquery to retrieve multiple values for dynamic updating in HTML

React TSX file not recognizing JSON data stored in an HTML data attribute

Update a specific form data field within an Angular application

Utilizing React.js components for Parsing JSON Objects

I am eagerly awaiting for the table command "rowspan" to finally start functioning properly. Right now, it seems to be completely ignored

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

Issue with hasClass and addClass not working as expected

Managing spinners in Protractor when they are concealed by a wrapper element