javascript - 从同一类的下拉列表jQuery中获取值

是否有可能从jQuery中单击任何一个时都从同一类中的两个不同的下拉列表中获取值，而不必编写两个change函数。例如：

    <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>

最佳答案

当然！

但是，您可以通过多种方式来观看选择（如果需要，可以使用id），但是我只是在观看所有选择。

$('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>

上面的代码将使用两个值返回一个数组。基本上，我只是找到所有选择的选项，并从中创建一个简单的数组。

编辑：对不起！我最初看错了，并给出了正确的答案。这是一个准确的。

编辑V2：因为有人指出了可能的混淆，所以这是更直接的。

$('.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>

或另一个：

$('#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>

这是发展，有百万种方法可以完成一项任务。我无意于浪费每种可能性，而只是给出一种方法来实现这一目标。