根據選擇選項數據屬性更改範圍

Question

我有一個選擇列表，其中有多個不同的選項，每個選項都具有價格的數據屬性。

當用戶選擇一個選項時，我希望跨度的內容根據所選選項的數據屬性進行更改。

我發現了一個解決方案，更新一個空的文本字段（item_price），但我可以做一些幫助修改此更改span（new_price）的內容如下;

<select class="item_size"> 
<option value="5 x 7" data-price="5.00">5 x 7 - <span>$ 5.00</span></option> 
<option value="8 x 10" data-price="10.00">8 x 10 - <span >$ 10.00</span></option> 
<option value="16 x 20" data-price="20.00">16 x 20 - <span>$ 20.00</span</option> 
</select> 
<input type="text" class="item_price" value="5.00"/> 
    <span class="new_price"></span> 

<script> 
    $('.item_size').live('change', function(){ 

    var $this = $(this), 
     selected = $this.find(':selected').data('price') 

    $this.siblings('.item_price').val(selected); 
    $this.siblings('.new_price').val(selected); 

}); 
</script> 

而且，我使用這個特定的網站的jQuery 1.6.1。

謝謝。

Answer 1

使用.text()/.html()作爲目標元素的跨度，.val()用於設置的輸入元素的值

$this.siblings('.new_price').text(selected); 

演示：Fiddle

Answer 2

使用該代替VAL

$this.siblings('.new_price').html(selected);