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

时间:2013-09-27 15:45:52

标签: javascript jquery

我有一个选择列表,其中包含许多不同的选项,每个选项都有价格的数据属性。

当用户选择一个选项时,我希望根据所选选项中的数据属性更改范围内容。

我找到了一个更新空文本字段(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。

谢谢。

2 个答案:

答案 0 :(得分:2)

使用.text() / .html(),因为目标元素是一个范围,.val()用于设置输入元素的值

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

演示:Fiddle

答案 1 :(得分:0)

使用此代替val

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