I have a sort function that is working when using a div and an a tag. But when change to a select option, it does not work.
<select id="sort-container" onchange="sortCards()">
<option>
<a href="javascript:sortCards('peoplecard', 'Services')">
Business 1
</a>
</option>
<option>
<a href="javascript:sortCards('peoplecard', 'Architect')">
Business 2
</a>
</option>
<option>
<a href="javascript:sortCards('peoplecard', 'Law')">
Business 3
</a>
</option>
</select>
You need to pass arguments to the sortCards() function. You can put the second argument in the value of each option, and use this.value to get it.
<select id="sort-container" onchange="sortCards('peoplecard', this.value)">
<option value='Services'>
Business 1
</option>
<option value='Architect'>
Business 2
</option>
<option value='Law'>
Business 3
</option>
</select>
Change your html structure to this:
<select id="sort-container">
<option value="services">
Business 1
</option>
Get select tag value in sortCards function:
const val = document.getElementById('sort-container').value;