我尝试为一个选择选项分配两个值,并根据后续单选按钮的结果选择一个或另一个。
例如,在这个例子中,我使用了 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) : "");
});
最佳答案
以下是我解决您的问题的建议:
- 听
.change()
<select>
上的事件和单选按钮,因为您永远不知道用户会首先选择哪一个。 - 而不是使用
value1
和value2
,使用 HTML5data-
属性来存储不同尺寸的价格。 - 当
.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) : "");
});
关于javascript - 为选项选择设置多个值并使用 jQuery 获取它们,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25834667/