HTML和JavaScript中的月份选择下拉菜单

Question

我在HTML中有2个下拉菜单，都代表月份。 所以我想要以下的验证。

如果我选择第一个下拉菜单的月份为四月，则下一个下拉菜单应该从四月开始。 如果第一个下拉菜单更改为六月，则第二个下拉菜单应更改为六月。

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

该函数将会：

function show_month()
{
//
}

我应该如何编写这个函数？

- user1638279

Answer 1

使用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>

并且在第一个选择中跳过onChange事件...

这里有一个工作示例：http://jsfiddle.net/sCnEZ/1/

- jtheman

---

谢谢，但我该如何将属性更改为“selected”？现在我已经得到了结果，但仍然显示为1月1日，如果我点击下拉菜单，则选定的月份会以蓝色突出显示。但我需要直接显示月份，不应每次都显示1月份。 - user1638279

@user1638279，你的代码中使用了选中属性来选择一月份的选项，这会初始选择哪个月份被选中。如果你想让函数显示当前月份，那么这就是一个与你最初提出的问题不同的问题。 - jtheman

在我的例子中，我使用了change()事件。当然，您也可以尝试其他事件，例如hover()，blur()等等。http://api.jquery.com/category/events/ - jtheman

Answer 2

你的JS函数可以像这样：

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

您应该将onchange="show_month()"更改为onchange="show_month(this)" 请查看此jsfiddle。

- Mihai Matei