jquery - 如何在jquery中获取下拉列表选项的数量

Question

我有一个问题，我有两个下拉列表，我想获取选项的数量。例如，如果第一个下拉列表选择+10，第二个列表选择+10，然后显示+10 X 2，如果第一个列表选择+5，第二个列表选择+10，然后显示+5 X 1 +10 X 1，我该怎么办？

$(function () {
    $('.feeList2').hide();
    $('.confirm1').click(function () {
        $('.feeList2').show();
        $('.departurebaggage').empty();
        $('.departurebaggage1').empty();
        $('.returnbaggage').empty();
        $('.returnbaggage1').empty();

        $('.scname').each(function () {
            var golist = $('select[name="decision"]').find(':selected').text();
            var golist1 = $('select[name="decision1"]').find(':selected').text();

            var indexname = $('input:checkbox[name="sckname' + $(this).val() + '"]:checked').val();
            if (indexname === '0') {

                $('.departurebaggage').append("<tr><td>" + golist + "</td>" + "<td>x</td>" + "<td>$</td>");
            }
            if (indexname === '1') {
                $('.departurebaggage').append("<tr><td>" + golist1 + "</td>" + "<td>x</td>" + "<td>$</td>");
            }

        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dFlightItinerary">	
<span class="dego">go</span>
<div class="passenger">
    <input type="checkbox" name="sckname0" class="scname" value="0" />MR LEE
    <select name="decision">
        <option selected>chose</option>
        <option value="0">+0</option>
        <option value="10">+10</option>
        <option value="15">+15</option>
        <option value="20">+20</option>
        <option value="25">+25</option>
    </select>
</div>
<div class="passenger">
    <input type="checkbox" name="sckname1" class="scname" value="1" />MR LIN
    <select name="decision1">
        <option selected>chose</option>
        <option value="0">+0</option>
        <option value="10">+10</option>
        <option value="15">+15</option>
        <option value="20">+20</option>
        <option value="25">+25</option>
    </select>
</div>
</div>
<button type="button" id="btnSearch" class="confirm1">confirm</button>
<table class="feeList2">
<thead>
    <tr>
        <td class="fareTitle2">content</td>
        <td>$</td>
    </tr>
</thead>
<tbody class="secondlist">
    <tr>
        <td>go</td>
    </tr>
    <tr class="departurebaggage" name="go"></tr>
    <tr>
        <td>return</td>
    </tr>
    <tr class="returnbaggage" name="return"></tr>
</tbody>
</table>

Answer 1

下面的一种解决方案假设您有超过 2 名乘客，并且仅在选中复选框时才包含下拉选项。其遵循的步骤是:

1. 迭代列表中的每位乘客(无论有多少)，确保仅包含选中复选框的乘客
2. 将这些乘客的每个选择选项的计数汇总到一个 JSON 对象中
3. 使用聚合的 JSON 数据格式化输出语句

完整的 JS fiddle :http://jsfiddle.net/vz00u6dL/

以下是生成所需聚合的代码:

var data = {};
var $passengers = $('div.passenger')
    .has('input[type=checkbox]:checked')
    .find('option:selected')
    .each(function() {
        if ($(this).attr('value')) {
            var text = $(this).text();
            if (data[text])
                data[text]++;
            else
                data[text] = 1;
        }
    });
var output = '';
for (var key in data) {
    output += (output ? ', ' : '') + key + ' X ' + data[key];
}
console.log(output);

输出符合您提供的场景:

• +10 X 2
• +10 X 1、+20 X 1