2011-12-08 6 views
0

こんにちは、誰かがjqueryのカレンダーを表示するのを手伝ってくれますか? は、ここで私は01が選択されている場合は、ドロップダウンリストの横にカレンダーを表示させたい私のコードJquery datepickerでカレンダーを表示する(値がデータベースからの値であるselectオプションから何かを選択した場合)

function OnChange(dropdown) 
{ 
    var status = dropdown [dropdown.selectedIndex].text; 
    status = dropdown[dropdown.selectedIndex].value; 
    if (status == 01){ 
     $(function() { 
     ("#datepicker").datepicker({ minDate: 0, maxDate: "+5M" }); 
     alert ("Success"); 
     }); 
    } 
    return true; 
} 

マイHtmlの

<tr> 
     <td> 
     <select id="schedule" onchange="OnChange(this.form.schedule);" > 
    //I used jquery here to get the value of select option from database and works ok 
    //There is corresponsing value on the options. If 01, the calendar will be shown, the rest..it will not be shown 


     </select> 
    </td> 
</tr> 

です。 jqueryの問題は、カレンダーが#datepickerのように表示される前にidが必要なことです。追加のテキストボックスなどは必要ありません。日付が選択されると、選択フィールドの下に表示されます。おかげ

答えて

0

は、あなたがこの意味でください:http://jsfiddle.net/Hbpv7/2/

を私は現在、あなたが値01を選択し、日付を選んだ場合は、日付ピッカーが除去されると、選択した後、一時日付ピッカー(インライン)を追加し、新しい日付のです表示されています。

$(function(){ 
    $.ajax({ 
     url : "yoururl.php", 
     success : function(result){ 
      $("select").append(result); 
     } 
    }); 
    $("select").change(function(){ 
     if($(this).find("option:selected").text() == "01") 
     { 
      showDatepicker.call(this); 
     } 
     else 
     { 
      $("#tmpdatepicker").remove(); 
     } 
    }); 
}); 

function showDatepicker() 
{ 
    // Don't show more then 1 
    if($("#tmpdatepicker").length) return; 

    $(this).after("<div id='tmpdatepicker'></div>"); 
    var _tmp = $("#tmpdatepicker").datepicker({ 
     onSelect : function(dateText, inst){ 
      $(this).after("<div class='mydate'>" + dateText + "</div>").remove(); 
     } 
    }); 
} 
+0

おかげで、私は「02」が2回、それは二回、日付を表示するか、それが –

+0

のみ1カレンダーが表示されますので、更新されたデータベースからのデータが表示されませんでしたmore..andさを選択しかし、データベースからはどうなるでしょうか? – Niels

+0

値はGETを使用してデータベースから取得されます。これは唯一のhtmlです。 ​​

0
//try this 
$("#datepicker").datepicker({ minDate: 0, maxDate: "+5M" }).hide(); 
$("#schedule").bind("change",function(){ 
    if ($(this).val() == 01) 
    $("#datepicker").show(); 
    else 
    $("#datepicker").hide(); 
}); 
関連する問題