I have many filter button like below, how can I get the select value without using its id
?
<select name="selectId" id="selectId" multiple class="selectpicker required form-control" data-live-search="true"> <option value="All" selected>All</option> <option value="1" selected>1</option> <option value="2" selected>2</option> </select> <select name="selectStore" id="selectStore" multiple class="selectpicker required form-control" data-live-search="true"> <option value="All" selected>All</option> <option value="A" selected>Store A</option> <option value="B" selected>Store B</option> </select> <select name="selectProduct" id="selectProduct" multiple class="selectpicker required form-control" data-live-search="true"> <option value="All" selected>All</option> <option value="apple" selected>Apple</option> <option value="orange" selected>Orange</option> </select>
Normally, I will use this code to find the changed select button:
$(document).ready(function() { // Get filter function for chart $('#selectId').change(function() { var select = $("#selectId").val(); if (selectLength >= 1 && select.includes("All")) { $('.selectpicker#selectId').selectpicker('deselectAll'); makeChart(); } else { makeChartFilter(select); } }) });
But the problem is when there are many filter buttons, I have to write many functions like above and just only change the id
.
How can I just use something like this:
$(document).ready(function() { // Get filter function for chart $('#selectpicker').change(function() { id_change = something; var select = $("#id_change").val(); ... }) });
Advertisement
Answer
Using vanilla JavaScript and the eventTarget, this is relatively straight forward. Here is an example:
document.getElementById('container').onchange = ({ target }) => { console.log(target.value); };
<form id="container"> <select name="foo"> <option>1</option> <option>2</option> <option>3</option> </select> <select name="bar"> <option>a</option> <option>b</option> <option>c</option> </select> </form>