Question

我希望我的选择option更改两件事：图像和价格。但是，因为只有一个选项value，所以只有一个jQuery可以工作。如何在option中获得多于1个值？如果无法做到，那么解决方案是什么？

HTML：

<select id="panelfabric" onChange="swapImage()">
    <option value="$168">Normal</option>
</select>

jQuery的：

// select panel image
$('#panelfabric').on('change', function() {
  $('#imageToSwap2').prop('src', 
    ['img/panel/', $('#panelfabric').val(), '.png'].join('')    
    );
});

// select panel price
$('#panelfabric').on('change', function () {
  $('#priceToSwap2').text($(this).val()
    );
});

P.S。我不能将图像命名为$ 168.png因此不会成为解决方案。

Answer 1

一种解决方案是使用HTML5数据属性将所需的信息附加到<option>：

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

然后：

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

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

Answer 2

我会选择Jon的data-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);
});

如何将多个值添加到1个选项中？

2 个答案: