Javascript 选择字段时的模式窗体清除

我正在开发一个库存管理系统，我有一个显示购买和使用的库存的表格。我已经包括了编辑按钮来使用模式编辑一行信息

当模态打开时，它将显示一个包含表中信息的表单。我遇到的问题是，当单击日期字段时，它会清除表单中所有其他字段的信息。选择产品或交易类型字段时不会发生这种情况

<div class="modal fade" id="editinvModal" role="dialog">
<div class="modal-dialog">

    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <h4 class="modal-title custom_align" id="Heading">Edit The Transaction</h4>
        </div>
        <div class="modal-body">
            <form method="post" action="inventory_update.php">
                <!-- Product -->
                <div class="form-group">
                    <select class="form-control" title="Select Product" id="prod1" name="productName">
                        <optgroup>
                            <option value="" disabled>Select Product</option>
                            <option>Product 1</option>
                            <option>Product 2</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Transaction type -->
                <div class="form-group">
                    <select class="form-control" title="Transaction Type" id="type1" name="transactionType">
                        <optgroup>
                            <option value="" disabled>Select Transaction Type</option>
                            <option>Inventory Used</option>
                            <option>Inventory Received</option>
                            <option>Inventory Reconciled</option>
                        </optgroup>
                    </select>
                </div>

                <!-- Date -->
                <div class="form-group input-group">
                    <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
                    <input readonly class="form-control form_datetime" name="date" id="date123" type="text">
                </div>

                <button type="submit" name="submit" class="btn btn-info btn-lg">
                    <span class="glyphicon glyphicon-ok-sign"></span> Update</button>
            </form>
        </div>

        <div class="modal-footer ">
            <div class="row-fluid">
                <button name="cancel" data-dismiss="modal" class="btn btn-warning btn-lg">
                    <span class="glyphicon glyphicon-ok-sign"></span> Cancel
                </button>
            </div>
        </div>

    </div>
</div>

---

如果有人能看到我做错了什么，或者对可能导致这一错误的原因有任何想法，我们将不胜感激

只要将模态事件从

show

更改为

show

即可解决问题

转载

---

只需将模式事件从

show

更改为

show

即可解决问题

转载

---

单击日期字段时是否正在运行该脚本？单击表上的编辑按钮时，将信息拉入模式的脚本将运行。选择日期字段时，正在运行日期脚本，该字段显示日历。我尝试了两个不同的日期选择组件，都清除了所有字段，并检查控制台的运行时间（是否在单击

日期字段时运行？）是，每次单击日期字段时，控制台都显示“xx”，这就是清除值的原因。你想用（'show.bs.modal'）上的（'editinvModal'）做什么？

？你想处理哪些实际的按钮？如果是“编辑”按钮，那么你应该处理它（但是你没有显示编辑按钮，所以不清楚）单击日期字段时是否正在运行该脚本？单击表上的“编辑”按钮时，将信息拉至模式的脚本将运行。选择日期字段时，将运行日期脚本，显示日历。我尝试了两个不同的日期选择组件，都清除了所有字段。不，我的意思是，将第一个脚本中的

console.log（'xx'）；

，并检查控制台的运行时间（是否在单击

日期字段时运行？）是的，每次单击日期字段时，控制台都显示'xx'，这就是清除值的原因。您试图用
$（'editinvModal'）做什么。on（'show.bs.modal'…
？您正在尝试处理哪些实际按钮？如果是“编辑”按钮，那么您应该处理它（但您没有显示编辑按钮，因此不清楚）是的，它解决了问题。非常感谢！是的，它解决了问题。非常感谢！
$('#editinvModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); //button that triggered the modal

    var productName = button.data('product');
    var transactionType = button.data('type');
    var date = button.data('date');

    var modal = $(this);

    modal.find('.modal-body #prod1').val(productName);
    modal.find('.modal-body #type1').val(transactionType);
    modal.find('.modal-body #date1').val(date);
});


$(".form_datetime").datetimepicker({
    format: 'dd-mm-yyyy',
    minView: 2,
    pickTime: false,
    autoclose: true,
    todayBtn: true});

$('#editinvModal').on('shown.bs.modal', function (event) {
     //Rest of the code
});