jQuery - 表单重置后更新选择字段

Question

在选择字段更改后，我使用以下代码通过 jQuery 重置 HTML 表单。

我的问题是，虽然所选选项似乎正在重置(我可以单击选择字段，现在会检查原始值)，但前端选择显示根本没有改变。

这是在页面加载时设置选择字段值的 HTML。

 <form class="form" id="product-details-form">
      <select class="form-control" id="supplier" name="productsupplier" disabled>
           <?php foreach($allSuppliers as $supplier) { ?>
                <option value="<?php echo $supplier['supplier_id']; ?>" <?php if ($productResult['product_supplier'] == $supplier['supplier_id']) { ?>selected <?php } ?>><?php echo $supplier['supplier_name']; ?></option>
           <?php } ?>
      </select>
 </form>

 <a href="javascript:;" id="product-vitals-edit"><i class="la la-edit"></i></a>
 <button id="product-details-footer-cancel">Cancel</button>

单击“编辑”按钮解锁选择字段:

$("#product-vitals-edit").click(function(){

    $("#product-details-form :input").prop("disabled", false);

});

单击“取消”会重置表单并返回到禁用状态。

$("#product-details-footer-cancel").click(function(e){

    e.preventDefault();

    $('#product-details-form').trigger("reset");
    $("#supplier").trigger("change");
    $("#product-details-form :input").prop("disabled", true);

});

再次。 #supplier 的原始值在重置时被“选择”，但它不会在前端显示。

Answer 1

这样就可以了

$("#supplier")[0].selectedIndex = $("#supplier")[0].selectedIndex;

在重置代码后保留它

 $('#product-details-form').trigger("reset");