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

Capture values from select and text inputs using JS and return output to HTML

本文关键字：输出 HTML 返回 选择 JS 文本 输入 使用      更新时间：2023-09-26

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

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

小提琴

# 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
});

您可以减少所需的：

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

jsFiddle示例

要将事件添加到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();
});
相关文章：