Question

我正在尝试创建一个可以在其他上下文中重用的小插件。我正在尝试根据注册月份设定制造月份。例如，如果我选择注册月份为5月，则制造月份应为1月至5月，依此类推。然而，我的踪迹已经消失了。这是我的代码

setManufacturedMonth($('#registrationmonth').val());
function setManufacturedMonth(regMonth) {    
    $('#manufacturemonth').empty();
     var months =  {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'};
    $.each(months, function( key, value ) {
        for(var i=1;i<=parseInt(regMonth);i++) {      

            $("<option></option>", {value: key , text:   value}).appendTo($('#manufacturemonth'));
        }
    });
}

$('#registrationmonth').change(function() {
     setManufacturedMonth($('#registrationmonth').val());
});

HTML代码

 Registration Month <select id="registrationmonth">
     <option value="4">April</option>
     <option value="5">May</option>
     <option value="6">June</option>
</select>
Manufactured Month <select id="manufacturemonth">
</select>

这是创建的小提琴

http://jsfiddle.net/UECsS/34/

Answer 1

试试这个：您可以简单地设置if条件来检查key是否小于或等于regMonth值。

setManufacturedMonth($('#registrationmonth').val());

function setManufacturedMonth(regMonth) {    
        $('#manufacturemonth').empty();

     var months = {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'};

   $.each(months, function( key, value ) {
     if(parseInt(key)<= parseInt(regMonth))     
     {
         $("<option></option>", {value: key , text: value}).appendTo($('#manufacturemonth'));
     }
    });
 }

    $('#registrationmonth').change(function() {
        setManufacturedMonth($('#registrationmonth').val());
    });

<强> DEMO

Answer 2

setManufacturedMonth($('#registrationmonth').val());
function setManufacturedMonth(regMonth) {    
    $('#manufacturemonth').empty();
    var months = {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'};
    for(i=1;i<=parseInt(regMonth);i++) {            
        $("<option></option>", {value: i , text: months[i]}).appendTo($('#manufacturemonth'));
    }
}

$('#registrationmonth').change(function() {
    setManufacturedMonth($('#registrationmonth').val());
});

为什么如此复杂的代码和答案？你不需要双循环来做这个

Answer 3

以下是我完成这项工作的方式。如果您有任何优化代码，请分享。

（文档）$。就绪（函数（）{

var regYear = $('#registeredYear');
var mfgYear = $('#manufacturedYear');
var regMonth = $('#registeredMonth');
var mfgMonth = $('#manufacturedMonth');  
var months = {1:'Jan',2:'Feb',3:'Mar',4:'Apr',5:'May',6:'Jun',7:'Jul',8:'Aug',9:'Sep',10:'Oct',11:'Nov',12:'Dec'};     

function setManufacturedYear(registeredYear) {
    var selectedManufacturedYear = mfgYear.val();
    mfgYear.empty();    
    for(var i = 0; i <= 2; i++) {
        $("<option></option>", {value: parseInt(registeredYear) - parseInt(i), 
            text: parseInt(registeredYear) - parseInt(i)}).appendTo(mfgYear);
    }
    if($("#manufacturedYear > option[value="+selectedManufacturedYear+"]").length > 0) {                      
        mfgYear.find("option[value="+selectedManufacturedYear+"]").attr("selected","selected");
    }
}

setManufacturedYear(regYear.val());
function setAutoSelectMonth(month,monthType) {      
    if($("#"+monthType+" > option[value="+month+"]").length > 0) {                      
        $("#"+monthType+"").find("option[value="+month+"]").attr("selected","selected");
    }
}

function setMonths(monthType,month) {           
    $.each(months, function( key, value ) {             
        if((parseInt(key) <= parseInt(month))) {
            $("<option></option>", {value: key , text: value}).appendTo(monthType);                
        }            
    });         
}

function setAllMonths(monthType) {
    $.each(months, function( key, value ) {
        $("<option></option>", {value: key , text: value}).appendTo(monthType);
    });
}

function setMfgOrRegMonth(element,regMth,mfgMth,regYear,mfgYear) {  
    switch(element) {
        case 'manufacturedMonth' :              
            regMonth.empty();
            $.each(months, function( key, value ) {                 
                if((parseInt(key) >= parseInt(mfgMth))) {                   
                    $("<option></option>", {value: key , text: value}).appendTo(regMonth);                    
                }
            });
            if($("#registeredMonth > option[value="+regMth+"]").length > 0) {                      
                regMonth.find("option[value="+regMth+"]").attr("selected","selected");
            }
            break;
        case 'registeredMonth':            
            mfgMonth.empty();   
            setMonths(mfgMonth,regMth);             
            break;
        case 'manufacturedYear':
            mfgMonth.empty();
            regMonth.empty();
            setAllMonths(regMonth);
            setAllMonths(mfgMonth);
            setAutoSelectMonth(mfgMth,"manufacturedMonth");
            setAutoSelectMonth(regMth,"registeredMonth");                
            if((parseInt(regYear) == parseInt(mfgYear)) && 
                (parseInt(regMonth.find("option:selected").attr("value")) <= parseInt(mfgMonth.find("option:selected").attr("value")))) { 
                mfgMonth.empty();
                setMonths(mfgMonth,regMth);
                setAutoSelectMonth(mfgMth,"manufacturedMonth");
            }            
            break;
        case 'registeredYear':
            mfgMonth.empty();
            regMonth.empty();
            setAllMonths(regMonth);
            setAllMonths(mfgMonth);
            setAutoSelectMonth(mfgMth,"manufacturedMonth");
            setAutoSelectMonth(regMth,"registeredMonth");
            break;
    }
}

setMfgOrRegMonth('registeredMonth',regMonth.val(),regYear.val(),mfgYear.val());

regMonth.change(function() {
    if((parseInt(regYear.val()) == parseInt(mfgYear.val())) &&
                (parseInt(regMonth.val()) >= parseInt(mfgMonth.val()))) {           
    setMfgOrRegMonth('registeredMonth',regMonth.val(),mfgMonth.val(),regYear.val(),mfgYear.val());
    }
});

mfgMonth.change(function() {
    if(parseInt(regYear.val()) == parseInt(mfgYear.val())) {            
        setMfgOrRegMonth('manufacturedMonth',regMonth.val(),mfgMonth.val(),regYear.val(),mfgYear.val());        
    }
});

mfgYear.change(function() {     
    setMfgOrRegMonth('manufacturedYear',regMonth.val(),mfgMonth.val(),regYear.val(),mfgYear.val());    
});

regYear.change(function() {
    setManufacturedYear(regYear.val());     
    setMfgOrRegMonth('registeredYear',regMonth.val(),mfgMonth.val(),regYear.val(),mfgYear.val());
});

}）;

使用jquery根据注册月份设置制造月份

HTML代码

3 个答案: