Question

这是代码：

        <label for="birthday">Birthday Year</label>
        <select id="byear" name="byear" required>
            <option value="">Select Year</option>
            <?
            $fy = date("Y")-19;
            for ($i = $fy; $i >= date("Y")-80; $i--) {
                echo '<option value="'.$i.'">'.$i.'</option>';
            }
            ?>
        </select>

        <label for="birthday">Month</label>
        <select id="bmonth" name="bmonth" required>
            <option value="">Select Month</option>
            <option value="jan">January</option>
            <option value="feb">February</option>
            <option value="mar">March</option>
            <option value="apr">April</option>
            <option value="may">May</option>
            <option value="jun">June</option>
            <option value="jul">July</option>
            <option value="aug">August</option>
            <option value="sep">September</option>
            <option value="oct">October</option>
            <option value="nov">Novermber</option>
            <option value="dec">December</option>
        </select>


        <label for="birthday">Day</label>
        <select id="bday" name="bday" required disabled>
            <option value="">Select Day</option>
            <?
            $fm = cal_days_in_month(CAL_GREGORIAN,month??,year??);
            for ($i = 1; $i <= $fm; $i++) {
                echo '<option value="'.$i.'">'.$i.'</option>';
            }
            ?>
        </select>

两个问题：

如果只有年份和月份才能启用日期列表框如果其中一个被重置为null，则被选中并被禁用？
函数cal_days_in_month（）如何直接接收以前列表框中选择的年份和月份？

Answer 1

您应该使用客户端javascript填充bday选项，就像我在下面为您制作的代码段一样。您所要做的就是将生成年份选项的php放回到下面的示例中（我不能在下面的示例中放置服务器端PHP）。享受！

请注意：此代码甚至会自动计算每个月的天数！（2月28日，除了闰年，那么它有29个！）。以1992年2月为例（这是闰年）。

function daysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
}

$('#byear, #bmonth').change(function() {

  if ($('#byear').val().length > 0 && $('#bmonth').val().length > 0) {
    $('#bday').prop('disabled', false);
    $('#bday').find('option').remove();

    var daysInSelectedMonth = daysInMonth($('#bmonth').val(), $('#byear').val());

    for (var i = 1; i <= daysInSelectedMonth; i++) {
      $('#bday').append($("<option></option>").attr("value", i).text(i));
    }

  } else {
    $('#bday').prop('disabled', true);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="birthday">Birthday Year</label>
<select id="byear" name="byear" required>
  <option value="">Select Year</option>
  <option value="1994">1994</option>
  <option value="1993">1993</option>
  <option value="1992">1992</option>
  <option value="1991">1991</option>
</select><br><br>

<label for="birthday">Month</label>
<select id="bmonth" name="bmonth" required>
  <option value="">Select Month</option>
  <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">Novermber</option>
  <option value="12">December</option>
</select><br><br>

<label for="birthday">Day</label>
<select id="bday" name="bday" required disabled>
  <option value="">Select Day</option>
</select>

Answer 2

你有没有理由在这里使用PHP？使用纯JS / Jquery解决方案可以轻松完成您想要实现的目标。

有jquery插件可能已经完成了你想要的一切： https://plugins.jquery.com/tag/calendar/

但是，如果您真的想自己做，我会将HTML更改为此（删除所有PHP）：

 <label for="birthday">Birthday Year</label>
    <select id="byear" name="byear" onchange="generateDays(this)" required>
        <option value="">Select Year</option>

        /*you can hardcode the years here or just generate it with a js function*/
    </select>

    <label for="birthday">Month</label>
    <select id="bmonth" name="bmonth" onchange="generateDays(this)" required>
        <option value="">Select Month</option>
        <option value="jan">January</option>
        <option value="feb">February</option>
        <option value="mar">March</option>
        <option value="apr">April</option>
        <option value="may">May</option>
        <option value="jun">June</option>
        <option value="jul">July</option>
        <option value="aug">August</option>
        <option value="sep">September</option>
        <option value="oct">October</option>
        <option value="nov">Novermber</option>
        <option value="dec">December</option>
    </select>


    <label for="birthday">Day</label>
    <select id="bday" name="bday" required disabled>
       /* keep this empty */
    </select>

然后你需要的只是一个JS函数：

function generateDays(sel) {
    var year = document.getElementById('byear').value;
    var month = document.getElementById('bmonth').value


    if(year == "" || month == "") {
       //disable your bday input or do whatever you want
       document.getElementById('bday').disabled = true;
    } else {

        var days = new Date(year, month, 0).getDate();
        //enable bday in case it was previously disabled
        document.getElementById('bday').disabled = false;

        //Clear the bday select element first
        document.getElementById('bday').innerHTML = "";

        for (i = 1; i <= days; i++) {
            document.getElementById('bday').innerHTML += "<option value='"+i+"'>"+i+"</option>";
        }

    }

}

如何在Javascript / PHP中选择月份和年份之后立即填充月中的天数？

2 个答案: