通过输入字段和下拉列表动态更新字段

Dynamically Update fields through Input field and dropdown

本文关键字：字段 动态 更新 下拉列表 输入      更新时间：2023-09-26

我正在尝试通过输入字段动态更新文本字段。然后，它将链接到一个包含值的下拉选择。我还需要提前30天显示预产期。

这是我的HTML:

<div>
    <label for="payment">Payment:</label>
    <input type="text" name="amount" id="amount" onChange="myfunction()"/>
    <br /><br />
    <label for="delivery">Delivery:</label>
    <select id="delivery" name="delivery">
        <option value="1">Fast</option>
        <option value="2">Medium</option>
        <option value="3">Slow</option>
    </select>    
</div>
<br />
<div>
Payment Breakdown: <br /><br />
Payment:
<div name="amount" id="amount"></div>
Freight:   
<div name="delivery" id="delivery"></div> 
Total Payment:
<div name="total" id="total"></div>
Due Date:    
<div name="date" id="date"></div>    
</div>

不过，我正在努力处理Javascript部分，并将其整合在一起。

我已经走到了这一步，现在我陷入了困境。（我不太清楚）

function myFunction()
{
var amount = document.getElementById("amount");
var delivery = parseInt($(this).find("option:selected").val());
total = amount + delivery
$("#total").html(total);
};

我看过Stackoverflow和谷歌上的例子，但似乎没有什么能与我想要实现的目标相似。虽然我知道答案就在那里，但我不确定我问的问题是否正确。

干杯

我会把它改成这个。这里我有一个updateCost()函数，当金额或交货发生变化时调用它。我还添加了处理到期日的代码。

从金额中删除内联onchange事件：

<input type="text" name="amount" id="amount"/>

Javascript：

function updateCost()
{
    var amount = $('#amount').val();
    var delivery = parseInt($('#delivery').val());
    var total = amount + delivery
    $("#total").html(total);
    $("#amountdiv").html(amount);
    $("#deliverydiv").html(delivery);
    // handle the due date
    var todayPlus30 = new Date();
    todayPlus30.setDate(todayPlus30.getDate()+30);
    var dateStr = todayPlus30.getDate() + "/" + (todayPlus30.getMonth()+1) + "/" + todayPlus30.getFullYear();
    $('#date').html(dateStr);
}
$(document).ready(function(){
    $('#amount').change(function(){ updateCost(); });
    $('#delivery').change(function(){ updateCost(); });
});

您的原始代码有几个问题：

  1. 内联函数调用的大小写错误
  2. 当this实际上不是您的任何元素（您没有将其作为参数传递）时，在函数中使用this
  3. 当amount是输入元素而不是值时，在计算中使用amount
  4. 从可用性的角度来看，它只会在金额发生变化时尝试更新，我认为最好在金额和交付发生变化时进行更新
相关文章：