1

我希望我的选择option改变两件事：图像和价格。但是，由于只能有 1 个选项value，因此只有一个 jQuery 可以工作。我如何有超过 1 个值option？如果做不到，有什么解决办法？

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()
    );
});

PS 我不能命名图像 $168.png 所以这不是一个解决方案。

4

2 回答 2

1

一种解决方案是将尽可能多的信息附加到<option>使用 HTML5 数据属性中：

<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"));
});
于 2013-02-28T21:34:27.993 回答
1

我会选择乔恩的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);
});
于 2013-02-28T21:45:02.933 回答