Question

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

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

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

});

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

2 个答案: