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

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（）作為目標元素是一個span， .val（）用於設置輸入元素的值

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

演示： 小提琴

Answer 2

使用此而不是val

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