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

Question

是否可以在 jQuery 中单击其中一个时从同一类中的两个不同下拉列表中获取值，而不必编写两个更改函数。例如:

    <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

当然可以!

有多种方法可以做到这一点，但您可以只观看选择(如果您愿意，可以使用 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>

这就是开发，有上百万种方法可以完成一项任务。我不打算用勺子喂养每一种可能性，而只是提供一种实现这一目标的方法。