Question

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

例如，在这个例子中，我使用了两种不同的衬衫，两种不同的价格取决于你挑选的衬衫的大小。 我知道这段代码不起作用，可能是因为“value1”和“value2”，但我只是把它放在这里来说明我想要实现的目标。

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

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

以下是我解决问题的建议：

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

所以你的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>

这只是一个可以最终确定的例子 - 目前选择小型/中型而不是Shirt1或Shirt2，价格将从所选选项的匹配data-price1或data-price2属性中检索。你是对的，它将无法为选项分配value1和value2属性，因为这将不是有效的HTML。只使用data-属性就可以解决这个问题。

更新小提琴：Fiddle
如果没有选择衬衫，则不会显示文字/价格。将赋值=“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

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

3 个答案: