HTML 和 JavaScript 中的月份选择下拉列表

问题描述 投票:0回答:2

我有 2 个 HTML 下拉菜单,均代表月份。所以我想要像下面这样的验证。

如果我选择第一个下拉菜单为四月,那么下一个下拉菜单应该从四月开始。如果第一个更改为六月,那么第二个应该更改为六月。

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

该功能将是:

function show_month()
{
// Comments
}

我应该如何编写该函数?

javascript html drop-down-menu
2个回答
5
投票

轻松使用 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/


0
投票

你的 JS 函数可能是这样的:

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

您应该将

onchange="show_month()"
更改为
onchange="show_month(this)"

看看这个jsfiddle

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.