为选项选择设置多个值并使用 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. 在<select> 和单选按钮上收听.change() 事件，因为您永远不知道用户会先选择哪一个。
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) : "");

});

Answer 2

刚刚做了一个Fiddle 并进行了一些调整

$('#shirts').on('change', function () {
  var selectedShirtText = $("#shirts :selected").text();
  var selectedShirtValue = $("#shirts :selected").val();
  var size = $("input[type='radio']:checked").val();
  var selectedShirtPrize = $("#shirts :selected").data("price" + size);
$("#priceSummary").text(selectedShirtText ? ("Price of: " + selectedShirtText + " " + "$" + selectedShirtPrize) : "");
});

用于 HTML 调整之类的

<option data-price1="15" data-price2="20" value="1">Shirt 1</option>

这只是一个可以最终确定的示例 - 当前选择 small/medium 而不是 Shirt1 或 Shirt2，价格将从所选选项的匹配 data-price1 或 data-price2 属性中检索。没错，将 value1 和 value2 属性分配给选项是行不通的，因为这不是有效的 HTML。只需使用data- 属性就可以解决这个问题。

更新小提琴：Fiddle
如果没有选择衬衫，则不会显示文字/价格。将 value="0" 分配给默认选项：

<option value="0">Choose shirt</option>

并仅在if(selectedShirtValue !== 0)的情况下打印文本/价格

Answer 3

我刚刚添加了一个新的属性名称 value1，它可以作为另一个值，具体取决于衬衫的尺寸。

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

JS

$('#shirts').on('change', function () {
var size=$("input[name=1]").val();
var selectedShirtText = $("#shirts :selected").text();
if (size=='large')
    var selectedShirtValue = $("#shirts :selected").val();
else
    var selectedShirtValue = $("#shirts :selected").attr('value1');

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

你可以运行这段代码here