I have 2 different select function that I'll use and get the id from the two different select and pass it into the 1 main function. But I have problem with getting the id from the select function.
What is the correct way on how to pass the id of cat_id and role_id into the getMyMode(a,b)
$(document).ready(function() {
$("#cat").change(function() {
let cat_id = $(this).val();
getMyMode(cat_id);
});
$("#role").change(function() {
let role_id = $(this).val();
getMyMode(role_id);
});
});
const getMyMode = (a, b) => {
console.log(a, b);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>Like this
const getMyMode = (a, b) => { console.log(a, b); };
$(function() { // when page has loaded
$("#cat, #role").on("change", function() { // when either has changed
let role_id = $("#role").val();
let cat_id = $("#cat").val();
getMyMode(cat_id,role_id);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>