使用下拉列表中的选定内容自动填充其他字段

Question

由于某些原因，escrow_wire和escrow_note字段不会填充我的jQuery语句中定义的值。

​

if ($('#escrow_type').val() == "NO_PAYMENT") {
  $('#escrow_wire').val("0");
  $('#escrow_note').val("This escrow has been created WITHOUT sending a payment email to the client.");
  alert('Do you want to create this escrow WITHOUT sending an escrow payment email to the client?');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-xs-push-1 col-sm-push-1 col-md-push-3 col-lg-push-3">
  <div class="st-select st-select-full highlight">
    <select name="escrow_type" id="escrow_type" class="custom-select">
      <option value="">- select -</option>
      <option value="NO_PAYMENT">No Payment Required at this time</option>
      <option value="WIRE">Bank Wire</option>
      <!--option value="DEPOSIT">Bank Deposit</option-->
      <option value="CHECK">Cashier Check</option>
      <option value="MONEY_ORDER">Money Order</option>
    </select>
  </div>
</div>

<div class="form-row form-group">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 label-wrapper">Wire Amount</div>
    <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-xs-push-1 col-sm-push-1 col-md-push-3 col-lg-push-3">
      <input class="second-section-input form-control highlight" type="text" value="" name="escrow_wire" id="escrow_wire" placeholder="Escrow Amount"/>
     </div>
    </div>
  <div class="form-row form-group">
    <textarea id="escrow_note" class="rounded-area form-control highlight" rows="7" name="escrow_note" placeholder="Ex. one month deposit, contract to lease executed, etc.."></textarea>
      <br>
    <button class="btn btn-primary ui-button btn-save shorter0" id="new_escrow" style="margin:8px 0 0 0;font-size:14px;">Save</button>
   <div class="clearfix"></div>
 </div>

​

Answer 1

为此，您需要将一个change事件处理程序连接到select，它将执行您的if条件，以便根据需要更新其他字段：

​

$('#escrow_type').on('change', function() {
  if ($(this).val() === "NO_PAYMENT") {
    $('#escrow_wire').val("0");
    $('#escrow_note').val("This escrow has been created WITHOUT sending a payment email to the client.");
    alert('Do you want to create this escrow WITHOUT sending an escrow payment email to the client?');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-xs-push-1 col-sm-push-1 col-md-push-3 col-lg-push-3">
  <div class="st-select st-select-full highlight">
    <select name="escrow_type" id="escrow_type" class="custom-select">
      <option value="">- select -</option>
      <option value="NO_PAYMENT">No Payment Required at this time</option>
      <option value="WIRE">Bank Wire</option>
      <!--option value="DEPOSIT">Bank Deposit</option-->
      <option value="CHECK">Cashier Check</option>
      <option value="MONEY_ORDER">Money Order</option>
    </select>
  </div>
</div>

<input type="text" id="escrow_wire" />
<input type="text" id="escrow_note" />

​

请注意，您可能还需要包括一条else语句，该语句根据向服务器发送数据的方式和内容来删除这些值。