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

Posted 2023-05-09

【中文标题】从多个选择表单中收集当前变量

【英文标题】：Gather current variables from multiple select forms

【发布时间】：2017-01-30 16:56:41

【问题描述】：

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

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

        <div class="col-md-6 center">
            <h4>Title</h4>
            <img name="division" src="/img/div/bronze_1.png" >
            <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" >
            <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" >
    <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)
);

【问题讨论】：

你的 javascript 和表单标签在哪里？

你的定价公式是什么？

我认为现在没有必要使用表单标签，因为我正在实时修改所有信息。公式也是如此，这将是简单的数学，我遇到的问题是我无法弄清楚如何从一个函数中的选择中输出所有变量来进行价格数学:(

【参考方案1】：

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

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

【讨论】：

谢谢！我现在可以看到一个数组，是否可以在每次表单发生变化时刷新它？

谢谢！有用。我会尝试从这里计算价格。