Getting values from dropdown list jquery in the same class

Question

Is it possible to get the values from two different dropdown list in the same class whenever either of them is clicked in jQuery without having to write two change functions. For instance:

    <div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>

Answer 1

Sure!

Multiple ways to do it however you can just watch the selects (you can use the id's if you'd like) however I am just watching all selects.

$('select').change((e) => {
   var selected =  $("option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>

The above will return an array to you with the two values. Basically I just find all selected options and create a simple array out of them.

EDIT: Sorry! I misread initially and gave a half right answer. Here is an accurate one.

Edit V2: Because someone was pointing out possible confusion here is something more directed.

$('.selectList select').change((e) => {
   var selected =  $(".selectList > select > option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    
    <div class="altSelect">
    <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
</div>

Or another one:

$('#prodVersionList,#prodAudienceList').change((e) => {
   var selected =  $(".selectList > select > option:selected").map(function(){ return this.value }).get();
    console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selectList">
            <select id="prodVersionList" style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select id="prodAudienceList" style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    
    
    <div class="altSelect">
    <select style="float: left; width: 150px; height: 25px;  margin-right: 20px;">
                <option value="1" selected="selected">All Products</option>
                <option selected="selected">Pen</option>
                <option selected="selected">Pencil</option>
            </select>
            <select style="float: right; width: 150px; height: 25px;">
                <option selected="selected">All Versions</option>
                <option selected="selected">1.0</option>
                <option selected="selected">1.1</option>
            </select>
    </div>
    </div>

This is development, there are a million ways to accomplish a task. I was not intending to spoonfeed each possibility but merely give a way to accomplish this.