用于生成月份和年份下拉菜单的Javascript

时间:2010-10-18 20:32:20

标签: javascript jquery

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
if(window.addEventListener){
   window.addEventListener('load',setDay,false);
 }
else { 
if(window.attachEvent){
   window.attachEvent('onload',setDay);
  }
 }

function setDay(){

document.forms[0].elements['mes'].onchange=function() {
   n= parseFloat(this.getAttribute("label"))+1;
   opt=[];
   txt=[];
   $("#dia > option").remove();
for(c=1;c<n;c++) {  

   opt[c]=document.createElement('option');
   txt[c]=document.createTextNode(c);
   opt[c].value=c;
   opt[c].setAttribute('name', 'dias');
   opt[c].appendChild(txt[c]);
   document.forms[0].elements['dia'].appendChild(opt[c]);
   }
  }
 }
</script>
-----
<select name="mes">
 <option value="z">Mês</option>
 <option value="31" label="31">Janeiro</option>
 <option value="29" label="31">Fevereiro</option>
 <option value="31" label="31">Março</option>
 <option value="30" label="31">Abril</option>
 <option value="31" label="31">Maio</option>
 <option value="30" label="31">Junho</option>
 <option value="31" label="31">Julho</option>
 <option value="31" label="31">Agosto</option>
 <option value="30" label="31">Setembro</option>
 <option value="31" label="31">Outubro</option>
 <option value="30" label="31">Novembro</option>
 <option value="31" label="31">Dezembro</option>
</select>
<select name="dia" id="dia">
 <option value="z">Dia</option>
</select>

<select name="ano">
 <option>Ano</option>
 <option value="2010">2010</option>
 <option value="2009">2009</option>
 <option value="2008">2008</option>
 <option value="2007">2007</option>
 <option value="2006">2006</option>
 <option value="2005">2005</option>
 <option value="2004">2004</option>
 <option value="2003">2003</option>
 <option value="2002">2002</option>
 <option value="2001">2001</option>
 <option value="2000">2000</option>
 <option value="1999">1999</option>
 <option value="1998">1998</option>
 <option value="1997">1997</option>
 <option value="1996">1996</option>
 <option value="1995">1995</option>
 <option value="1994">1994</option>
 <option value="1993">1993</option>
 <option value="1992">1992</option>
 <option value="1991">1991</option>
 <option value="1990">1990</option>
 <option value="1989">1989</option>
 <option value="1988">1988</option>
 <option value="1987">1987</option>
 <option value="1986">1986</option>
 <option value="1985">1985</option>
 <option value="1984">1984</option>
 <option value="1983">1983</option>
 <option value="1982">1982</option>
 <option value="1981">1981</option>
 <option value="1980">1980</option>
 <option value="1979">1979</option>
 <option value="1978">1978</option>
 <option value="1977">1977</option>
 <option value="1976">1976</option>
 <option value="1975">1975</option>
 <option value="1974">1974</option>
 <option value="1973">1973</option>
 <option value="1972">1972</option>
 <option value="1971">1971</option>
 <option value="1970">1970</option>
</select>

所以我的问题是我希望使用POST在表单中捕获PHP的值,并且我在捕获月份值时遇到问题,因为我希望那个月有自己的值而不是天数的值那个月对应的那个。我改变了这个脚本,甚至更好地改进了,但现在我被卡住了。

任何人都可以帮助我吗?感谢

5 个答案:

答案 0 :(得分:3)

将您的HTML代码更改为:

<select name="mes">
 <option value="z">Mês</option>
 <option value="1" label="31">Janeiro</option>
 <option value="2" label="31">Fevereiro</option>
 <option value="3" label="31">Março</option>
 ...
</select>

(或根据您的需要将月份命名为值。)

在JavaScript中创建查找表:

var numberOfDays = {
    "1": 31,
    "2": 29,
    "3": 31
    ...
}

包含每个月的天数。

然后你做:

var n= numberOfDays[$(this).val()];
opt=[];
txt=[];
$("#dia > option").remove();
for(c=1;c<=n;c++) {
    //...
}

附注:始终使用var声明局部变量!

顺便说一下,如果你已经使用了jQuery,我建议在整个脚本中使用它。所以例如

document.forms[0].elements['mes'].onchange=function() {...}

会变成

$('select[name=mes]').change(function() {...});

还有其他改进的空间;)

答案 1 :(得分:2)

为什么不喜欢这样:http://jsfiddle.net/McDP5/

var months = [
  {DaysInMonth:31, Name:"Janeiro"},
  {DaysInMonth:31, Name:"Fevereiro"},
  {DaysInMonth:31, Name:"Março"},
  {DaysInMonth:31, Name:"Abril"},
  {DaysInMonth:31, Name:"Maio"},
  {DaysInMonth:31, Name:"Junho"},
  {DaysInMonth:31, Name:"Julho"},
  {DaysInMonth:31, Name:"Agosto"},
  {DaysInMonth:31, Name:"Setembro"},
  {DaysInMonth:31, Name:"Outubro"},
  {DaysInMonth:31, Name:"Novembro"},
  {DaysInMonth:31, Name:"Dezembro"}
];
$(function() {
    var monthSelector = $('select[name=mes]');
    $.each(months, function(index,month) {
        $('<option></option>')
            .attr('label', month.Name)
            .attr('value', index)
            .html(month.DaysInMonth)
            .appendTo(monthSelector);
    });
    var yearSelector = $('select[name=ano]');
    for(var year=1970;year<=2010;year++)
        $('<option></option>')
            .attr('label', year)
            .attr('value', year)
            .html(year)
            .appendTo(yearSelector);            
});​

甚至更好,a calendar control from the jQuery UI

答案 2 :(得分:0)

也许您可以在value属性中存储要发送到服务器的实际值,并将JavaScript对象/哈希作为月份名称的查找表到天数。

答案 3 :(得分:0)

如果您想获取月份名称,请将您的html更改为

 <option value="Janeiro" label="31">Janeiro</option>

现在您将获得月份名称

使用月份名称和值

在PHP中保留数组 像$ montharraY一样价值$ montharraY ['january'] [31]

因此,您必须使用此PHP文章检查从JS获得的值。

答案 4 :(得分:0)

这就是我为创建下拉列表所做的。只需要jQuery。

HTML:

 <select class="form-control" id="yearMonthInput"></select>

javascript代码:

var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    for (i = new Date().getFullYear() ; i > 2008; i--) {
        $.each(months, function (index, value) {
            $('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
        });                
    }

以这种方式看待:

enter image description here