为选项select设置多个值，并使用jQuery获取这些值

Setting multiple values for option select and get them with jQuery

本文关键字：jQuery 获取 select 选项 设置      更新时间：2023-09-26

我试图将两个值分配给一个选择选项，并根据后续单选按钮的结果选择其中一个。

例如，在这个例子中，我使用了两种不同的衬衫，根据你选择的衬衫的尺寸有两个不同的价格我知道这段代码不起作用，可能是因为"value1"answers"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) : "");
});

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

  1. 在<select>和单选按钮上收听.change()事件，因为您永远不知道用户将首先选择哪一个
  2. 使用HTML5data-属性来存储不同大小的价格，而不是使用value1和value2
  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) : "");
});

刚刚做了一些调整

$('#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:Fiddle
如果未选择衬衫，则不会显示文本/价格。赋值＝"；0"；默认选项：

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

并且仅在if(selectedShirtValue !== 0)

的情况下打印文本/价格

我刚刚添加了一个新的属性名称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) : "");});

您可以在这里运行此代码

相关文章：