从多个选择表单中收集当前变量

Question

我试图在一个函数中收集来自 4 种不同选择形式的所有当前选择。然后我会根据选择输出一个价格。

我已经可以输出一些 UI 的单独选择，但我不知道如何在一个函数中获取所有变量。

        <div class="col-md-6 center">
            <h4>Title</h4>
            <img name="division" src="/img/div/bronze_1.png" alt="Bronze">
            <select class="form-control" id="current">
                <option value="0" selected>Bronze</option>
                <option value="1">Silver</option>
                <option value="2">Gold</option>
                <option value="3">Platinum</option>
                <option value="4">Diamond</option>
            </select>
            <select class="form-control m10" id="currentdiv">
                <option value="1">Division I</option>
                <option value="2">Division II</option>
                <option value="3">Division III</option>
                <option value="4">Division IV</option>
                <option value="5" selected>Division V</option>
            </select>
        </div>
        <div class="col-md-6 text-md-center text-sm-center">
            <h4>Desired Rank</h4>
            <img name="desired-division" src="/img/div/bronze_1.png" alt="Bronze">
            <select class="form-control" id="desired">
                <option value="0" selected>Bronze</option>
                <option value="1">Silver</option>
                <option value="2">Gold</option>
                <option value="3">Platinum</option>
                <option value="4">Diamond</option>
            </select>
            <select class="form-control m10" id="desireddiv">
                <option value="1">Division I</option>
                <option value="2">Division II</option>
                <option value="3">Division III</option>
                <option value="4" selected>Division IV</option>
                <option value="5">Division V</option>
            </select>
        </div>
    </div>
</div>
<div class="col-md-4 text-md-center text-sm-center" id="order">
    <h4>Your Order</h4>
    <div class="alert-info">
        <p class="lead">From <span id="currentspan">Bronze</span> <span id="currentdivspan">V</span> to <span id="desiredspan">Bronze</span> <span id="desireddivspan">IV</span></p>
    </div>
    <div class="alert-success">
    <p>Price: <span id="price">8</span>€  ($<span class="priceusd">8.92</span>)</p>
    </div><img src="/img/payment-badges.png" alt="payment badges">
    <a href="/order.php" class="btn btn-lg btn-primary m25"><i class="fa fa-paypal" aria-hidden="true"></i> Order Now</a>
</div>

$("#current").change(function(){
    var val4 = parseInt($('#current').val());
    var pictureList = [
        "/img/div/bronze_1.png",
        "/img/div/silver_1.png",
        "/img/div/gold_1.png",
        "/img/div/platinum_1.png",
        "/img/div/diamond_1.png" ];
        $("img[name=division]").attr("src",pictureList[val4]);
    var text;
    switch (val4) {
        case 0:
            text = "Bronze";
            break;
        case 1:
            text = "Silver";
            break;
        case 2:
            text = "Gold";
            break;
        case 3:
            text = "Platinum";
            break;
        case 4:
            text = "Diamond";
            break;
    }
    $("#currentspan").html(text);
});

$("#currentdiv").change(function(){
    var cdiv = parseInt($('#currentdiv').val());
    var cdivtext;
    switch (cdiv) {
        case 1:
            cdivtext = "I";
            break;
        case 2:
            cdivtext = "II";
            break;
        case 3:
            cdivtext = "III";
            break;
        case 4:
            cdivtext = "IV";
            break;
        case 5:
            cdivtext = "V";
            break;
    }
    $("#currentdivspan").html(cdivtext)
});

Answer 1

要获得所有选定的选项，请执行以下操作：

var selected_options = [];
$('select.form-control').change(function(){
    selected_options = $('select.form-control').find('option:selected').map(function(){return $(this).val();});
});