JQM Select 列出多项选择并获取值答案

【问题标题】：JQM Select List multiple selections and get valuesJQM Select 列出多项选择并获取值
【发布时间】：2014-03-21 16:44:40
【问题描述】：

大家好，我这里有一些代码似乎无法正常工作，或者我的逻辑没有意义。我需要创建一个多选框，允许用户选择他们想要的披萨配料。反过来，在我的计算中，每个浇头都是 0.50 美分的额外成本。因此，如果用户只想要一个浇头，则只需额外支付 0.50 美分。因此，如果用户选择选项 2 或 3，甚至选择 1 和 4，则浇头的价格将是相同的。

任何帮助将不胜感激！

这是新的 HTML：

<label for='top'>Toppings:</label>
                    <div class="ui-field-contain">
                            <select name="top" id="top" multiple="multiple" data-native-menu="false">
                                <option>Choose Toppings</option>
                                <option value="1">Sausage</option>
                                <option value="1">Pepperoni</option>
                                <option value="1">Mushroom</option>
                                <option value="1">Bell Pepper</option>
                                <option value="1">Onions</option>
                            </select>
                    </div>

JS：

var top = $("#top").val();      
var priceTop = '';

        if (top == 1)
        {
        priceTop = '.50';
        }
        else if (top == 2)
        {
        priceTop = '1.00';
        }
        else if (top == 3)
        {
        priceTop = '1.50';
        }
        else if (top == 4)
        {
        priceTop = '2.00';
        }
         else if (top == 5)
        {
        pricetop = '2.50';
        }

最初这是我用于确定选择了哪些浇头的代码，但我发现如果我将 HTML 上的值保留为 1，它会改变我的计算。所以现在我必须解决这个问题。 旧 HTML

<label for='top'>Toppings:</label>
                    <div class="ui-field-contain">
                            <select name="top" id="top" multiple="multiple" data-native-menu="false">
                                <option>Choose Toppings</option>
                                <option value="1">Sausage</option>
                                <option value="2">Pepperoni</option>
                                <option value="3">Mushroom</option>
                                <option value="4">Bell Pepper</option>
                                <option value="5">Onions</option>
                            </select>
                    </div>

【问题讨论】：

我认为我最大的错误是将 priceTop 的值分配给 HTML 上的特定值。我需要找出用户点击了多少选择，然后合计选择的值。
此jsfiddle.net/Palestinian/m2brw 多选值作为数组被省略。多个 array 的长度为 0.5

标签： jquery jquery-mobile logic jquery-selectbox

【解决方案1】：

jQuery Mobile 中的多个非原生select 值.val() 返回一个数组。该 array 的 .length 表示全部选择的选项。将.length 乘以0.5 得到最终值。

$(document).on("pagecreate", function () {
    $("#top").on("change", function () {
        if ($(this).val() != null) {
            console.log($(this).val().length * 0.5 + " USD");
        } else {
            console.log("No toppings.");
        }
    });
});

Demo

【讨论】：