2012-10-17 4 views
8

Ich habe 2 Dropdown-Menüs in einem HTML-Format beide Monate darstellt. Also möchte ich eine Validierung wie folgt.Monat Auswahl Drop-Down in HTML, Javascript

Wenn ich den 1. Dropdown-Monat als April auswählen werde, dann sollte das nächste Dropdown-Menü ab dem Monat April beginnen. Wenn der erste auf Juni geändert wird, wird der zweite auf Juni umgestellt.

<div id="head2" style="width:15%;float:right;margin-left:5px;"> 
    <select id='gMonth2' onchange="show_month()"> 
    <option value=''>--Select Month--</option> 
    <option selected value='1'>Janaury</option> 
    <option value='2'>February</option> 
    <option value='3'>March</option> 
    <option value='4'>April</option> 
    <option value='5'>May</option> 
    <option value='6'>June</option> 
    <option value='7'>July</option> 
    <option value='8'>August</option> 
    <option value='9'>September</option> 
    <option value='10'>October</option> 
    <option value='11'>November</option> 
    <option value='12'>December</option> 
    </select> 
    </div> 

<div id="head1" style="width:15%;float:right;margin-left:5px;"> 
     <select id='gMonth1'> 
    <option value=''>--Select Month--</option> 
    <option selected value='1'>Janaury</option> 
    <option value='2'>February</option> 
    <option value='3'>March</option> 
    <option value='4'>April</option> 
    <option value='5'>May</option> 
    <option value='6'>June</option> 
    <option value='7'>July</option> 
    <option value='8'>August</option> 
    <option value='9'>September</option> 
    <option value='10'>October</option> 
    <option value='11'>November</option> 
    <option value='12'>December</option> 
    </select> 
    </div> 

und die Funktion wird Funktion show_month() { // }

wie soll ich diese Funktion schreiben sein ??

Antwort

4

einfach mit jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 

<script> 
$(function(){ 
    $('#gMonth2').change(function(){ 
    var month = $(this).val(); 
    $('#gMonth1').val(month); 
    }); 
}); 
</script> 

und das onChange Ereignis in der ersten Auswahl überspringen ...

Arbeitsbeispiel hier: http://jsfiddle.net/sCnEZ/1/

+0

Thnkx, aber, wie ich das Attribut „ausgewählt“ ändern ?? jetzt bekomme ich das ergebnis, aber immer noch wird es als 1. januar gezeigt, wenn ich auf dropdown klicke, dann wird der ausgewählte monat in blauer farbe hervorgehoben. aber ich brauche den Monat, um direkt zu kommen. Es sollte nicht immer Januar zeigen. – user1638279

+0

@ user1638279 Was meinen Sie? Sie verwenden das ausgewählte Attribut in Ihrem Code in den Optionen für Januar, der anfänglich auswählt, welcher Monat von Grund auf neu ausgewählt wird. Wenn die Funktion CURRENT Moth anzeigen soll, ist dies eine andere Frage als die, mit der Sie begonnen haben. – jtheman

+0

@ user1638279 In meinem Beispiel verwende ich das Ereignis change(). Sie können natürlich auch mit anderen Ereignissen wie hover(), blur() usw. versuchen http://api.jquery.com/category/events/ – jtheman

0

Ihre JS Funktion wie folgt sein könnte:

function show_month(obj) { 
    document.getElementById('gMonth1').selectedIndex = obj.selectedIndex; 
} 

Sie sollten onchange="show_month()" mit 01 ändern

Schauen Sie sich diese jsfiddle