PHP实现下拉框选中时自动在文本框填充对应金额

看起来你已经完成了日期选择和活动下拉框填充的核心功能，很棒！要实现选择活动后自动填入对应金额，我们只需要给每个活动关联金额数据，再添加下拉框的变化监听就可以了，具体实现如下：

步骤1：重构活动数据，关联金额 #

首先我们把活动名称和对应的金额整合到一个结构化的对象中，这样后续维护和读取都会更方便：

const eventsByDay = {
  sun: [
    { name: '7.00am : Mass in Kannada', amount: '100' },
    { name: '8.00am : Mass in Tamil', amount: '150' },
    { name: '9.30am : Mass in English', amount: '200' }
  ],
  mon: [
    { name: '6.30 am : Mass in English', amount: '50' }
  ],
  tue: [
    { name: '6.30 am : Mass in English', amount: '50' }
  ],
  wed: [
    { name: '5.00pm : Adoration followed by mass at 5.30pm in Tamil', amount: '75' },
    { name: '6.30pm - 7.00pm : Adoration in English followed by mass', amount: '75' }
  ],
  thu: [
    { name: '6.30pm : mass in English (Sunday liturgy)', amount: '100' }
  ],
  fri: [
    { name: '6.30pm : Mass in English (St.Alphonsa Novena)', amount: '80' }
  ],
  sat: [
    { name: '6.00pm - 7.00pm : Adoration followed by Mass & Snacks', amount: '90' }
  ]
};

步骤2：修改日期选择逻辑，给下拉选项添加金额属性 #

在日期选择后的回调函数中，我们填充下拉框时，给每个<option>标签添加data-amount属性，用来存储该活动对应的金额：

$("#datepicker").datepicker({
  dateFormat: 'yy-mm-dd',
  firstDay: 1,
  minDate: mindate,
  onSelect: function(dateText, inst) {
    var today = new Date(dateText);
    var dayName = d[today.getDay()];
    $('#slDay').html('');
    // 添加默认提示选项
    $('#slDay').append('<option value="">---SELECT---</option>');
    
    // 获取当天的活动列表
    const dayEvents = eventsByDay[dayName] || [];
    let html = '';
    $.each(dayEvents, function(index, event) {
      // 给选项添加data-amount属性，存储对应金额
      html += `<option value="${event.name}" data-amount="${event.amount}">${event.name}</option>`;
    });
    $('#slDay').append(html);
  }
});

步骤3：添加下拉框变化监听，自动填充金额 #

最后给下拉框绑定change事件，当用户选择活动时，读取对应选项的data-amount值并填入金额输入框：

// 监听下拉框选择变化
$('#slDay').on('change', function() {
  // 获取选中选项的金额
  const selectedAmount = $(this).find('option:selected').data('amount');
  // 将金额填入输入框（如果没有选中有效选项则清空）
  $('#amount').val(selectedAmount || '');
});

完整修改后的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<div class="w3l-user">
  <label class="head">Select Date<span class="w3l-star"> * </span></label>
  <input type="text" id="datepicker" name="date" placeholder="Select Date" required="">
</div>
<div class="clear"></div>
<div class="gender">
  <label class="head">Select Mass<span class="w3l-star"> * </span></label>
  <select class="form-control" required="" id='slDay' name="day">
    <option value="">---SELECT---</option>
  </select>
</div>
<div class="w3l-user">
  <label class="head">Amount<span class="w3l-star"> * </span></label>
  <input type="text" name="amount" id="amount" required="" />
</div>
<div class="clear"></div>

<script type="text/javascript">
$(function() {
  var date = new Date();
  var dayNo = date.getDay();
  var mindate = (7 - dayNo);
  var d = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];

  // 重构后的活动与金额对应数据
  const eventsByDay = {
    sun: [
      { name: '7.00am : Mass in Kannada', amount: '100' },
      { name: '8.00am : Mass in Tamil', amount: '150' },
      { name: '9.30am : Mass in English', amount: '200' }
    ],
    mon: [
      { name: '6.30 am : Mass in English', amount: '50' }
    ],
    tue: [
      { name: '6.30 am : Mass in English', amount: '50' }
    ],
    wed: [
      { name: '5.00pm : Adoration followed by mass at 5.30pm in Tamil', amount: '75' },
      { name: '6.30pm - 7.00pm : Adoration in English followed by mass', amount: '75' }
    ],
    thu: [
      { name: '6.30pm : mass in English (Sunday liturgy)', amount: '100' }
    ],
    fri: [
      { name: '6.30pm : Mass in English (St.Alphonsa Novena)', amount: '80' }
    ],
    sat: [
      { name: '6.00pm - 7.00pm : Adoration followed by Mass & Snacks', amount: '90' }
    ]
  };

  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    minDate: mindate,
    onSelect: function(dateText, inst) {
      var today = new Date(dateText);
      var dayName = d[today.getDay()];
      $('#slDay').html('');
      $('#slDay').append('<option value="">---SELECT---</option>');
      
      const dayEvents = eventsByDay[dayName] || [];
      let html = '';
      $.each(dayEvents, function(index, event) {
        html += `<option value="${event.name}" data-amount="${event.amount}">${event.name}</option>`;
      });
      $('#slDay').append(html);
    }
  });

  // 监听下拉框选择，自动填充金额
  $('#slDay').on('change', function() {
    const selectedAmount = $(this).find('option:selected').data('amount');
    $('#amount').val(selectedAmount || '');
  });
});
</script>

这样修改后，当你选择日期后下拉框会加载对应活动，选择活动时金额输入框就会自动填入该活动对应的金额啦~

内容的提问来源于stack exchange，提问作者user3168637