使用 jQuery 設置輸入值不起作用

Question

我正在嘗試根據 Angular 中的另一個下拉列表值並使用 jQuery 設置下拉列表的值，它可以工作並且它會自動選擇所需的值，但它不會在提交后將值添加到數據庫中。 我確信關於數據庫連接的一切都很好，因為選擇任何其他選定的值（例如本例中的歐元）都會添加到數據庫中。

 $(document).ready(function() { $("#country").change(function() { var val = $(this).val(); if (val == "usa") { $("#currency").val("dollar"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form (ngSubmit)="onSubmit()"> <select id="country" name="country"> <option value="usa">usa</option> <option value="france">france</option> </select> <select id="currency" name="currency"> <option value="dollar">dollar</option> <option value="euro">euro</option> </select> <button type="submit" class="btn btn-primary">submit </button> </form>

注意：Dollar 已被選中，但在提交時並未將其添加到數據庫中，而如果我刪除 jQuery function 並手動選擇貨幣，它將添加到數據庫中，一切都很好。

Answer 1

jQuery 代碼似乎不錯...但我的問題是，您為什么要使用 jQuery 來更新 Angular 中的表格。

您是否評估過使用模板驅動或反應式 forms 代替？ 您可以在下面找到以模板驅動的形式編寫的表單。

<form (ngSubmit)="onSubmit()">

    <select id="country" name="country" (change)="onCountryChange()" [(ngModel)]="selectedCountry">
      <option
        *ngFor="let country of countries"
        [value]="country">
        {{ country }}
      </option>
    </select>

    <select id="currency" name="currency" [(ngModel)]="selectedCurrency">
      <option
        *ngFor="let currency of currencies"
        [value]="currency">
        {{ currency }}
      </option>
    </select>

    <button type="submit" class="btn btn-primary">submit </button>

</form>

在這個plunkr中，您可以找到使用模板驅動表單的完整示例......但如果我在哪里，我會 go 用於反應式表單方法。