Question

我回来了。如果我选择其他选项，我如何更改选择内容？这是我JSFiddle。我想要的是，如果我选择'mes'= 2选项（2月）。它显示我在'dia'选择（天）上只有28天。当选择数字2时我不知道如何引用，所以我可以构建一个if结构。提前，我的英语不是最好的...（我不想使用JQuery）

这是我的整个HTML：

<p>Dia
    <select name="dia" id="dia"></select>Mes
    <select name="mes1" id="mes"></select>Año
    <select name="año" id="año"></select>
</p>
<p>
    <input type="text" name="txtFecha1" id="txtFecha1" disabled/>
    <input type="submit" name="capturar" id="capturar" value="Capturar" onclick="capturar()" />
</p>
<p>
    <input type="text" name="txtFecha2" id="txtFecha2" disabled/>
    <input type="submit" name="capturar2" id="capturar2" value="Capturar" onclick="capturar()" />
</p>
<p>
    <input type="submit" name="diferencia" id="diferencia" value="Diferencia" onclick="diferencia()" />
</p>
<p id="pParrafo">Dias entre las fechas:</p>

onClick函数尚未编程。

这是JS：

var mes = new Array();
for (i = 1; i <= 12; i++) {
    mes[i] = i;
}


var seleccionar = document.getElementById('mes');


for (var i = 1; i < mes.length; i++) {
    var option = document.createElement('option');
    option.innerHTML = mes[i];
    option.value = mes[i];
    seleccionar.appendChild(option);
}


var año = new Array();
for (i = 1950; i <= 2014; i++) {
    año[i] = i;
}


var seleccionar = document.getElementById('año');


for (var i = 1950; i < año.length; i++) {
    var option = document.createElement('option');
    option.innerHTML = año[i];
    option.value = año[i];
    seleccionar.appendChild(option);
}

Answer 1

以下是我如何执行此操作的简单示例：根据所选年份和月份添加和删除选择日期的选项。它不会创建或销毁选项，只是移动它们。

与代码相比，代码更少，效率更高。

<script>
// Simple function to return days in month given year and month
// Month is calendar number, e.g. 1 = jan, 2 = feb, etc.
function daysInMonth(year, month) {
  return new Date(year, month, 0).getDate();
}

// Update the number of options in the day select    
var updateDay = (function() {

  // Document fragment to store spare options
  var frag = document.createDocumentFragment();

  return function(control) {

    // Get a reference to the form and day select
    var form = control.form;
    var daySelect = form.day;

    // Get days in month based on year and month selected
    var days = daysInMonth(form.year.value, form.month.value);

    // Remove or restore days to correct number
    while(daySelect.options.length != days) {
      daySelect.options.length > days? frag.appendChild(daySelect.lastChild) :
                                       daySelect.appendChild(frag.lastChild);
    }
  }
}());
</script>

<!-- Simple date selector -->
<form>
Year: <select name="year" onchange="updateDay(this)">
  <option value="2010">2010
  <option value="2011">2011
  <option value="2012">2012
  <option value="2013">2013
  <option value="2014">2014
</select>

Month: <select name="month" onchange="updateDay(this)">
  <option value="1">Jan
  <option value="2">Feb
  <option value="3">Mar
  <option value="4">Apr
  <option value="5">May
  <option value="6">Jun
  <option value="7">Jul
  <option value="8">Aug
  <option value="9">Sep
  <option value="10">Oct
  <option value="11">Nov
  <option value="12">Dec
</select>

Day: <select name="day">
  <script>
    // Saves on markup...
    for (var i=1; i<32; i++) {
      document.write('<option value="' + i + '">' + i + '<\/option>');
      console.log(i);
    }
  </script>
</select>
</form>

Answer 2

你可以在月份选择元素的变化上设置filldia函数试试这段代码：

HTML：

<select name="mes1" id="mes" onchange="fillDia(this)"

<强>的Javascript

// generate dia items
var dia = new Array();

fillDia(document.getElementById('mes')); 

function fillDia(opt) {
    // empty dia select element options
    document.getElementById('dia').options.length = 0;

    var maxDays = 31;
    //alert (opt.value);
    if (opt.value == '2') maxDays = 28; //feburary
    if (opt.value == '4' || opt.value == '6' || opt.value == '9' || opt.value == '11') maxDays = 30; //april , june , september , november

    for (i = 1; i <= maxDays; i++) {
        dia[i] = i;
    }
    //se guarda el select dia
    var dias = document.getElementById('dia');

    //generar select para dia
    for (var i = 1; i <= maxDays; i++) {
    var option = document.createElement('option');
    option.innerHTML = dia[i];
    option.value = dia[i];
        dias.appendChild(option);
    }

}

JSFIDDLE DEMO

更改选择的内容

2 个答案: