Question

好的，我在这里有一个双重问题。

我正在做的是我有三个select框，用户可以选择日期。

年份预定义为月份。当用户选择一个月（或一年）时，该下拉数字会计算该年当月的天数并适当填充它们。

第一个问题是使用第一部分代码中的常规.change()事件。这里发生的是我期望公平的事情。它正确填充前端，但是当你选择一个框时，dom会强制值为1。

为了解决这个问题，我使用了你可以在第二部分找到的更改event delegation。从某种意义上说，当你选择一个值时，你就可以得到这个值。但由于某些原因，在使用事件委派时，找到下拉列表的正确日期范围的功能不起作用。

我希望能看到第二双眼睛，看看我哪里出错了。

第一部分

// Get days for each month and year includes leap years
function getDaysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
}
//update days to reflect new month or year
function dayrange(month, year, day) {
  var dmon = $(month).val(),
    dyear = $(year).val(),
    dday = getDaysInMonth(dmon, dyear),
    ddays = '1',
    $dcont = $(day);

  $dcont.empty(); // Empty the list before appending

  for (var i = 1; i <= dday; i++) {
    $dcont.append($("<option></option>").attr("value", ddays).text(ddays));
    ddays++;
  }
}
dayrange('#dob-month', '#dob-year', '#dob-day');
$('.dobrange').change(function() {
  dayrange('#dob-month', '#dob-year', '#dob-day');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="dobrange" id="dob-day" name="dob-day"></select>

<select class="dobrange" id="dob-month" name="dob-month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select class="dobrange" id="dob-year" name="dob-year">
<option value="2017">2017</option>
</select>

第二部分

// Get days for each month and year includes leap years
function getDaysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
}
//update days to reflect new month or year
function dayrange(month, year, day) {
  var dmon = $(month).val(),
    dyear = $(year).val(),
    dday = getDaysInMonth(dmon, dyear),
    ddays = '1',
    $dcont = $(day);

  $dcont.empty(); // Empty the list before appending

  for (var i = 1; i <= dday; i++) {
    $dcont.append($("<option></option>").attr("value", ddays).text(ddays));
    ddays++;
  }
}
dayrange('#dob-month', '#dob-year', '#dob-day');
$('.dobrange').on("change", "#dob-day", function(){
  dayrange('#dob-month', '#dob-year', '#dob-day');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="dobrange" id="dob-day" name="dob-day"></select>

<select class="dobrange" id="dob-month" name="dob-month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select class="dobrange" id="dob-year" name="dob-year">
<option value="2017">2017</option>
</select>

Answer 1

好的，所以我意识到我做错了什么。我在更改事件中包含了日期范围，导致它在更改时重置为1。咄

// Get days for each month and year includes leap years
function getDaysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
}
//update days to reflect new month or year
function dayrange(month, year, day) {
  var dmon = $(month).val(),
    dyear = $(year).val(),
    dday = getDaysInMonth(dmon, dyear),
    ddays = '1',
    $dcont = $(day);

  $dcont.empty(); // Empty the list before appending

  for (var i = 1; i <= dday; i++) {
    $dcont.append($("<option></option>").attr("value", ddays).text(ddays));
    ddays++;
  }
}
dayrange('#dob-month', '#dob-year', '#dob-day');
$('#dob-month, #dob-year').change(function() {
  dayrange('#dob-month', '#dob-year', '#dob-day');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="dobrange" id="dob-day" name="dob-day"></select>

<select class="dobrange" id="dob-month" name="dob-month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>

<select class="dobrange" id="dob-year" name="dob-year">
<option value="2017">2017</option>
</select>

Answer 2

当它变得更加简单时，你似乎做了很多繁重的工作。你甚至可以看到下面的代码轻松处理闰年。

$('#dob-month, #dob-year').change(function() {
  var days = new Date($('#dob-year').val(), $('#dob-month').val(), 0).getDate();
  for (var i = 1; i <= days; i++) {
    $('#dob-day').append('<option value="' + i + '">' + i + '</option>')
  }
}).change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dobrange" id="dob-day" name="dob-day"></select>

<select class="dobrange" id="dob-month" name="dob-month">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

<select class="dobrange" id="dob-year" name="dob-year">
  <option value="2017">2017</option>
  <option value="2018">2018</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
</select>

jQuery - 未正确选择的动态选项

2 个答案: