Question

我正在使用javascript购物车创建这个在线商店。某些产品有选项，选项会更改商品的价格。一个项目的价格曾经是一个跨度，但我认为一个禁用的输入字段看起来更好。我的问题是我的代码不会改变输入字段的值，但是当价格以span编写时它确实改变了它。

jQuery：

$(".item_lenght").change(function() {
        $('.item_price').html($('option:selected', this).data('price'));
    });

和html：

<table style="border:1px solid black; border-radius: 6px;">
    <tr>
        <td>
        <select class="item_lenght" name="size">
        <option value="Tyhjä">Valitse koko</option>
        <option data-price="47.00€" value="25cm"> 25cm x 150cm </option>
        <option data-price="48.00€" value="50cm"> 50cm x 150xm</option>
        <option data-price="49.00€" value="100cm"> 100cm x 150cm </option>
        </select>
        </td>
        <td>
        <select class="item_type" name="type">
        <option value="Ei valintaa">Valitse väri</option>
        <option data-name="Teipit (Harjattu Alumiini)" value="Harjattu Alumiini"> Harjattu Alumiini </option>
        <option data-name="Teipit (Musta hiilikuitu)" value="Musta hiilikuitu"> Musta hiilikuitu </option>
        <option data-name="Teipit (Valkoinen hiilikuitu)" value="Valkoinen hiilikuitu"> Valkoinen hiilikuitu </option>
        <option data-name="Teipit (Mattamusta)" value="Mattamusta"> Mattamusta </option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Määrä:
        </td>
        <td>
        <input type="text" value="1" class="item_Quantity" style="width:30px;">
        </td>
    </tr>
    <tr>
        <td>Hinta
        </td>
        <td>
        <input type="text" readonly="readonly" class="item_price" value="0.00€">
        </td>
    </tr>
    </table>


        <a class="item_add" href="javascript:;"> Osta prkl </a>

我可能做错了什么？

Answer 1

使用readonly="readonly"进行输入，而不是禁用它。

还可以将val()用于文本字段而不是text()，以便将值分配给textfield

<强> Live Demo

<input type="text" readonly="readonly" class="item_price" value="0.00€">

$(".item_lenght").change(function() {
    $('.item_price').val($('option:selected', this).data('price'));
});

Answer 2

使用.val()修改并获取内容

$('.item_price').val($('option:selected', this).data('price'));

Answer 3

如果你使用jQuery，你需要使用DOM Ready。

$(document).ready(function(){
// JQuery goes inside here
});

祝你好运！

Answer 4

从输入框中检索值并修改输入框时，必须使用jQuery .val()函数而不是.text()或.html()函数。你的jQuery应该是这样的：

$('.item_price').val($('option:selected', this).data('price'));

在select上更改输入字段的值

4 个答案: