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

时间:2018-10-09 14:49:22

标签: javascript jquery html

由于某些原因,escrow_wireescrow_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>

1 个答案:

答案 0 :(得分:0)

要执行此操作,您需要将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语句,该语句会删除这些值,具体取决于将数据发送到服务器的方式和方式。