2010-10-18 90 views
0
<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值的形式和我在追趕的月份值一個問題,因爲我這個月想有他們自己的價值,而不是與當月相對應的天數的價值。我稍微改變了這個腳本,甚至做了更好的事情,但現在我卡住了。的JavaScript生成年份和月份的下拉列表中

任何人都可以幫助我嗎?謝謝

+0

啊我的眼睛! jQuery使得大部分代碼完全不必要。傷害閱讀原始處理DOM – 2010-10-18 20:34:52

回答

0

也許你可以在value屬性中存儲你打算髮送給服務器的實際值,並將JavaScript對象/哈希值作爲月份名稱到天數的查找表。

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() {...}); 

而且有餘地其他方面的改進也;)

+0

我應該真的刷新頁面發佈答案之前... :) – 2010-10-18 20:42:53

+0

thanks!這是非常有用的,謝謝你的幫助:) – Afonso 2010-10-18 20:58:00

+0

我會盡力做到這一切只是與jquery,謝謝你的提示 – Afonso 2010-10-18 20:58:20

0

,如果你想獲得該月的名字,你的HTML改爲

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

現在您將獲得月份名稱

保持一個數組PHP中的月份名稱和值

像$ montharraY與值$ montharraY [「月」] [31]

所以,你必須檢查你的JS得到這個PHP arary值。

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

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