Month selection dropdown in HTML and JavaScript

Question

I have 2 drop downs in HTML both representing months. So I want a validation like following.

If I select the first drop down month as April, then the next drop-down menu should start from the month April. If the first one is changed to June then the second should change to June.

<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'>January</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'>January</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>

The function will be:

function show_month()
{
// Comments
}

How should I write that function?

jtheman · Accepted Answer · 2012-10-17 07:11:58Z

5

Easy with 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>

and skip the onChange event in the first select...

Working example here: http://jsfiddle.net/sCnEZ/1/

edited Oct 17, 2012 at 7:11

answered Oct 17, 2012 at 7:01

jtheman

7,5013 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1638279 Over a year ago

thnkx, but how i will change the attribute to "selected" ?? now i am getting the result but still its showing as january 1st, if i click on dropdown then selected month is highlighted in blue color. but i need the month to come directly. it should not show january everytime.

jtheman Over a year ago

@user1638279 What do you mean, you are using the selected attribute in your code in the options for january, that will initially select which month is selected from scratch. If you want the function to show CURRENT moth then this is another question than you started with.

jtheman Over a year ago

@user1638279 in my example I'm using the change() event. You can of course also try with other events such as hover(), blur() etcetera api.jquery.com/category/events

Mihai Matei · Accepted Answer · 2012-10-17 07:13:54Z

0

Your JS function could be like this:

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

You should change onchange="show_month()" with onchange="show_month(this)"

Check out this jsfiddle

answered Oct 17, 2012 at 7:13

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

Month selection dropdown in HTML and JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related