Question

每当在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>

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>

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

Answer 2

使用“ selectList”类在div中查找select元素，并在找到的列表中标识每个选定的选项。编译成一个数组（或其他任何东西）供以后使用。

[EDIT]已更新，以便在进行新选择时重置并填充数组

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

2 个答案: