Read the selected value inside the control’s change handler, then pass it to a normal predicate. You do not need eval(), the Function constructor, or code stored in HTML attributes.
Last updated: October 12, 2026.
const records = [
{name: 'Alpha', status: 'open'},
{name: 'Beta', status: 'closed'},
{name: 'Gamma', status: 'open'}
];
const statusSelect = document.querySelector('#status-filter');
const output = document.querySelector('#results');
function render() {
const selected = statusSelect.value;
const visible = records.filter(record =>
selected === 'all' || record.status === selected
);
output.replaceChildren(...visible.map(record => {
const item = document.createElement('li');
item.textContent = record.name;
return item;
}));
}
statusSelect.addEventListener('change', render);
render();Use a select with values such as all, open, and closed, plus an empty <ul id="results">. Creating nodes and assigning textContent avoids interpreting record values as HTML.
Keep the predicate separate from the control
MDN defines Array.prototype.filter() as returning a new array containing the elements for which the callback is truthy. The callback closes over the selected value, so it does not need a special this object or a dynamically compiled expression.
The HTMLSelectElement.value property returns the first selected option’s value. Give options stable machine-readable values and keep user-facing labels independent. Convert numeric values explicitly before strict comparisons.
Scale from one filter to several
For multiple controls, collect their current values into a small filter object and let one predicate test each active condition. Call the same render() function from every change handler. This keeps filtering deterministic and makes it straightforward to test with plain arrays.
Client-side filtering is appropriate for a bounded dataset already in the browser. For thousands of rows, send validated filter parameters to the server and page the results rather than downloading everything. Continue with JavaScript form validation, dependent dropdowns with Fetch, and accessible interactive controls.
