javascript - 为选项选择设置多个值并使用 jQuery 获取它们

Question

我尝试为一个选择选项分配两个值，并根据后续单选按钮的结果选择一个或另一个。

例如，在这个例子中，我使用了 2 件不同的衬衫，根据您选择的衬衫尺寸，有两种不同的价格。 我知道这段代码不起作用，可能是因为“value1”和“value2”，但我只是把它放在这里来说明我想要实现的目标。

http://jsfiddle.net/Shibi/o2hftb6e/3/

任何帮助都会很棒。谢谢!

HTML

<select id="shirts">
    <option>Choose shirt</option>
    <option value1="15" value1="20">Shirt 1</option>
    <option value1="20" value1="25">Shirt 2</option>
</select>
<div>
    <input type="radio" name="1" value="small" />Small
    <input type="radio" name="1" value="medium" />Medium</div>
<div id="priceSummary"></div>

JS

$('#shirts').on('change', function () {

    var selectedShirtText = $("#shirts :selected").text();
    var selectedShirtValue = $("#shirts :selected").val();

    $("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");

});

Answer 1

以下是我解决您的问题的建议:

1. 听.change() <select> 上的事件和单选按钮，因为您永远不知道用户会首先选择哪一个。
2. 而不是使用 value1和value2 ，使用 HTML5 data-属性来存储不同尺寸的价格。
3. 当 .change()事件被触发，嗅探所选衬衫的类型，并根据 data- 获取尺寸的正确价格。由单选按钮的值指定的属性。
4. 声明默认尺寸，以便您的价格不会不确定。

所以你的 HTML 是:

<select id="shirts">
    <option value="">Choose shirt</option>
    <option value="Shirt 1" data-small="15" data-medium="20">Shirt 1</option>
    <option value="Shirt 2" data-small="20" data-medium="25">Shirt 2</option>
</select>
<div>
    <input type="radio" name="shirtSize" value="small" checked />Small
    <input type="radio" name="shirtSize" value="medium" />Medium
</div>
<div id="priceSummary"></div>

这是有效的演示:http://jsfiddle.net/teddyrised/o2hftb6e/8/

$('#shirts, input[name="shirtSize"]').on('change', function () {

    var selectedShirtText = $("#shirts :selected").val();
    var selectedShirtValue = $("#shirts :selected").attr("data-" + $('input[name="shirtSize"]:checked').val());

    $("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtValue) : "");

});