使用 JS 从选择和文本输入中捕获值并将输出返回到 HTML

Question

我有一个有点像计算器的表格。在文本框中输入一个数字，并使用下拉菜单，用户选择一个用作乘数的数字。 我可以正确地从文本框中捕获值，但是从选择输入中捕获值是很棘手的。

我希望在用户更改文本框中的数字或更改他们在选择字段中选择的选项时运行此功能。

FIDDLE

# HTML
<form>
    <input type="text" id="numberInput"></input>
    <select id="lengthInput">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>
<div id="result"></div>

# JS
$(function () {
    var amount = $('#numberInput').val();
    var length_value = ''
    $('#lengthInput').on("change", function () {
        var length = document.getElementById("lengthInput");
        var length_value = length.options[length.selectedIndex].value;
    }).change();
    var calculatedAmount = amount * length_value;
    document.getElementById('result').innerHTML = amount
});

Answer 1

你可以减少你必须做的事情：

$(function () {
    $(':input').on('change keyup',function () {
        $('#result').html($('#numberInput').val() * $('#lengthInput').val());
    })
});

jsFiddle example

Answer 2

要将事件添加到您的 input 和 select：将 $('#lengthInput').on("change", function () { 更改为

$('#lengthInput, #numberInput').on("change input", function () {

然后将您的amount 代码放入回调中。完整代码如下：

$(function () {
    $('#lengthInput, #numberInput').on("change input", function () {
        var amount = $('#numberInput').val();
        var length = $("#lengthInput").val();// <-simplified
        var calculatedAmount = amount * length;
        document.getElementById('result').innerHTML = calculatedAmount
    }).change();

});