将jquery结果放在输入字段中[关闭]

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

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

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

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

这里做了两个额外的改进，以防它们存在于实际代码中：

• 在total 变量赋值中添加了var，这样代码就不会意外创建（或更糟的是，覆盖）全局变量
• 注册事件处理回调后，在代码末尾添加;

total 的赋值假设在作用域中有一个名为data 的变量，并且该变量的成员的值对应于#selector 中的选项。这意味着data 看起来像这样：

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

这些数据完全是根据数据结构组成的，所以除了理解代码之外不要依赖它。您已收到警告。

Answer 2

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

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