Question

当从下拉列表中选择值时，将在文本框中为该特定选定下拉列表输入金额。

当用户选择日期时，特定日期中出现的事件将显示在下拉菜单中。
当用户从下拉列表中选择该事件时，该特定日期的金额将自动输入文本框中。

下面是我的代码，它选择日期并使用当天可用的事件填充下拉列表。对于选定的下拉值，我不知道如何自动输入金额。

 

<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'];
  var event = ['6.30 am : Mass in English']
  var event1 = [' 6.30pm : Mass in English (St.Alphonsa Novena)']
  var event2 = ['6.00pm - 7.00pm : Adoration followed by Mass & Snacks']
  var event3 = ['5.00pm : Adoration followed by mass at 5.30pm in Tamil', '6.30pm - 7.00pm : Adoration in English followed by mass']
  var event4 = [' 6.30pm : mass in English (Sunday liturgy)']
  var event5 = ['7.00am : Mass in Kannada', '8.00am : Mass in Tamil', '9.30am : Mass in English']

  //Lest assume this is  event from database
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    minDate: mindate,
    onSelect: function(dateText, inst) {
      var today = new Date(dateText);
      var a = (d[today.getDay()]);
      $('#slDay').val(d[today.getDay()])
      var html = '';
      $('#slDay').html('');
      if (d[today.getDay()] == 'sun')
        $.each(event5, function(index, value) {
          html += '<option value="' + value + '">' + value + '</option>'
        });
      if (d[today.getDay()] == 'mon')
        $.each(event, function(index, value) {
          html += '<option value="' + value + '">' + value + '</option>'
        });
      if (d[today.getDay()] == 'tue')
        $.each(event, function(index, value) {
          html += '<option value="' + value + '">' + value + '</option>'
        });
      $('#slDay').append(html);
    }
  });
});
</script>

<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>

Answer 1

这是我的工作代码。您需要对数组进行细微更改。我改变了

var event = {'10': '6.30 am : Mass in English', '9': '6.30 am : Mass in English'};

设置键值为amount，值为event的键值对。

小提琴：https://jsfiddle.net/bhumi/mtyhxu5j/2/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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'];
    var event = {'10': '6.30 am : Mass in English', '9': '6.30 am : Mass in English'};
    var event1 = [' 6.30pm : Mass in English (St.Alphonsa Novena)']
    var event2 = ['6.00pm - 7.00pm : Adoration followed by Mass & Snacks']
    var event3 = ['5.00pm : Adoration followed by mass at 5.30pm in Tamil', '6.30pm - 7.00pm : Adoration in English followed by mass']
    var event4 = [' 6.30pm : mass in English (Sunday liturgy)']
    var event5 = ['7.00am : Mass in Kannada', '8.00am : Mass in Tamil', '9.30am : Mass in English']

    //Lest assume this is  event from database
    $("#datepicker").datepicker({
      dateFormat: 'yy-mm-dd',
      firstDay: 1,
      minDate: mindate,
      onSelect: function(dateText, inst) {
        var today = new Date(dateText);
        var a = (d[today.getDay()]);
        $('#slDay').val(d[today.getDay()])
        var html = '';
        $('#slDay').html('');
        if (d[today.getDay()] == 'sun')
          $.each(event5, function(index, value) {
            html += '<option value="' + value + '">' + value + '</option>'
          });
        if (d[today.getDay()] == 'mon')
          $.each(event, function(index, value) {console.log(value); console.log(index);
            html += '<option value="' + index + '" >' + value + '</option>'
          });
        if (d[today.getDay()] == 'tue')
          $.each(event, function(index, value) {
            html += '<option value="' + value + '">' + value + '</option>'
          });
        $('#slDay').append(html);
        $('#slDay').trigger('change');
      }
    });
//    var event_amount['6.30 am : Mass in English'] =  '10.00';

    $('#slDay').on('change', function(e){
        $('#amount').val(this.value);
    });
  });
</script>

<强> HTML

<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>

从php中的下拉列表中选择时，自动在文本框中输入金额

1 个答案: