Changing select content

Question

I am back. How am I suppose to change a select content if I choose an option of other select. This is my JSFiddle. What I want is that if I select the 'mes' = 2 option (february). It shows me only 28 days on the 'dia' select (days). I don't know how to refer when the number 2 is selected so I can build a if structure. Thx in advance, my english is not the best... (I don't wanna use JQuery)

This is my whole 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 functions are not programmed yet.

This is the 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

Here's a simple example of how I'd do it: add and remove options from the days select based on the year and month selected. It doesn't create or destroy options, it just moves them around.

It's less code and more efficient than alternatives.

<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

youcan set filldia function on change of month select element try this code :

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