根据选择选项数据属性更改范围

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