如何將多個值設置爲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，因此不會是解決方案。

來源

2013-02-28 Elijah Yang

你可以有一個逗號分隔值，用單一的「改變」。 – 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")); 
});

來源

2013-02-28 21:34:27 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); 
});

來源

2013-02-28 21:45:02 Barmar

如何將多個值設置爲1選擇選項？

回答

相關問題