Question

我目前正在将计算结果分配给<p>元素，我希望对输入字段进行相同的分配。

这是我的代码。

HTML

<select id="selector" onChange="Expedisi(this);">
            <option>Select product</option>
          <optgroup label="Sedan">
            <option value="Lancer EX">Lancer EX 1.6 / 2.0</option>
            <option value="Lancer EX GT">Lancer EX GT</option>
          <optgroup label="Sport">
            <option value="Lancer Evolution X">Lancer Evolution X</option>
          <optgroup label="SUV">
            <option value="Outlander">Outlander</option>
        </select>

<p id="thetotal"> </p>

的JavaScript

$('#selector').on('change', function() {
    total = data[$(this).val()].price;

    $('#thetotal').text("" + total);
})

change处理程序将根据#selector元素中选择的选项执行分配。我知道如何检索所选选项的值以及如何计算total，因为我已将此值分配给<p>元素。

如何为input元素分配相同的值？我只需要知道使用哪个jQuery方法来设置输入元素的值。

Answer 1

如果您想在输入字段中显示总计，只需将此代码放入onchange回调中：

var input = document.querySelector('input'); // your input field
input.value = total;

Answer 2

你的jQuery代码非常接近。设置文本输入字段内容的方法是使用.val()方法。使用它，您的代码将如下所示：

$('#selector').on('change', function() {
    var total = data[$(this).val()].price;

    $('#thetotal').val("" + total);
});

此处有两项额外的改进，如果它们存在于实际代码中：

将var添加到total变量分配中，以便代码不会意外创建（或更糟糕地，覆盖）全局变量
在注册事件处理程序回调

;

total的分配假设范围内有一个名为data的变量，该变量的成员的值与#selector中的选项相对应。这意味着data看起来像这样：

var data = {
    "Lancer EX": { price: 17995 },
    "Lancer EX GT": { price: 21873 },
    "Lancer Evolution X": { price: 26434 },
    "Outlander": { price: 21659 }
};

这些数据完全由数据结构组成，因此除了理解代码之外，不要依赖它。你已被警告过了。

将jquery结果放在输入字段中

2 个答案: