Jquery 如何将多个值设置为1选择选项？

我想让我的select

选项

改变两件事：图像和价格。但是，由于只能有一个选项

value

，因此只有一个jQuery可以工作。如何在

选项中有超过1个值？如果做不到，解决办法是什么

HTML:

另外，我无法将图像命名为$168.png，因此这不是一个解决方案。
一个解决方案是使用HTML5数据属性将所需的尽可能多的信息附加到
：

<option value="whatever" data-price="$168" data-image="http://...">
    Normal
</option>

我会选择Jon的
数据XXX
解决方案。另一个选项是在Javascript中放置映射表：

var item_data = {
    "whatever": { price: 168, image: "http://..." },
    "something": { price: 200, image: "http://..." },
    ... };

然后：

$("#panelfabric").on("change", function() {
    var item = $(this).val();
    $('#imageToSwap2').prop('src', item_data[item].image);
    $('#priceToSwap2').text('$'+item_data[item].price);
});

您可以有一个逗号分隔的值，在“change”上有一个单独的值。我使用类似于

$('#panelfabric').on('change', function() {
  var $selected = $('#panelfabric').children(":selected");

  $('#imageToSwap2').prop('src', $selected.data("image"));
  $('#priceToSwap2').text($selected.data("price"));
});

var item_data = {
    "whatever": { price: 168, image: "http://..." },
    "something": { price: 200, image: "http://..." },
    ... };

$("#panelfabric").on("change", function() {
    var item = $(this).val();
    $('#imageToSwap2').prop('src', item_data[item].image);
    $('#priceToSwap2').text('$'+item_data[item].price);
});