Jquery 根据一个菜单中的选择禁用另一个菜单中的选项

我有一个菜单，当从中选择一个值时，它可以启用其他可以选择月份的菜单（开始月份和结束月份）。我想增加一个限制，月底不能早于月初，我不知道该怎么做

以下是JSFIDLE：

也许是这样的

$("#recurBegin").change(function(){
  var begin = $("#recurBegin option:selected").attr("value");
  //disable options in #recurEnd where the value is less than that of #recurBegin.
}
});

---

您可以使用选项索引：

---

---

我想这会给你想要的

html:

---

请看这个小提琴：

还有一件事……我将最后一行中的代码修改为（索引+1），这样用户就只能选择他们在第一个菜单中选择的月份之后的月份。但当您在第一个菜单中选择“12月”时，第二个菜单将无法正常工作。@user1476992欢迎提供帮助：）

$("#recurBegin").change(function () {
    var begin = $(this).find('option:selected').index();
    $('#recurEnd').find('option').prop('disabled', false).filter(':lt(' + begin + ')').prop('disabled', true);
    $('#recurEnd').val(function(){return $(this).find('option:enabled:first').val()});
});

var end = $('#recurEnd');
$('#recurBegin').change(function () {
    var index = $(this).find('option:selected').index();
    end.find('option').show();
    end.find('option:lt(' + index + ')').hide();
});

<div class="col-sm-9">
    <select name="catFrequency" id="catFrequency" onchange="toggleAnnual();">
        <option value="0">Monthly</option>
        <option value="1">Annual</option>
    </select>
</div>
<div class="col-sm-8">
    <select  name="monthSelect" id="recurBegin" value="Select Month">
        <option value='' selected></option>
        <option value='01'>January</option>
        <option value='02'>February</option>
        <option value='03'>March</option>
        <option value='04'>April</option>
        <option value='05'>May</option>
        <option value='06'>June</option>
        <option value='07'>July</option>
        <option value='08'>August</option>
        <option value='09'>September</option>
        <option value='10'>October</option>
        <option value='11'>November</option>
        <option value='12'>December</option>
    </select>
</div>

<div class="col-sm-3 clearfix">
    <label class="control-label">Ending Month:</label>
</div>
<div class="col-sm-9">
    <select name="monthSelect" id="recurEnd" value="Select Month">
    </select>
</div>

$("#recurBegin").change(function(){
    $("#recurEnd").empty();
    var add = false;

    $("#recurBegin option").each(function(i, val){
        if($(this).is(':selected')) add = true;
        if(add){
            $("#recurEnd").append($(this).clone());
        }        
    });
});