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

问题描述：

我希望我的选择option更改2件事：图片和价格。但是，因为只有一个选项value，所以只有一个jQuery可以工作。如何在option中获得超过1个值？如果无法完成，什么是解决方案？如何将多个值设置为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() 
    ); 
});

附：我无法将图像命名为$ 168.png，因此不会是解决方案。

你可以有一个逗号分隔值，用单一的“改变”。 – c0deNinja 2013-02-28 21:29:23

我使用类似'

答

一个解决办法是附加的信息一样多，因为你需要使用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")); 
});

答

我会去与乔恩的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选择选项？

相关推荐