2012-07-09 77 views
0

我想动态地创建选择选项。我有两个数组“年”和“月”。当用户选择2011年,那么它的相应月份应该显示在下一个下拉菜单中。例如选择选项使用jquery创建

如果我们选择2009年再下一个下拉选项应该是 “月”, “月”,“月”

<head> 




<script type="text/javascript" src="jquery-1.7.2.js"></script> 


<script type="text/javascript"> 

$(function(){ 

    $('#first').change(function(){ 

    var year= new Array('2011','2010','2009'); 
    var month= new Array('jan_feb_march','jan_march_april','dec_oct_feb'); 

    var yearVal= $('#first option:selected').text(); 


for(i=0; i<year.length;i++){ 


    if(year[i]==yearVal){ 

    var months=month[i] 


} 


} 



    var y= months.split('_'); 

for (z=0;z<y.length;z++){ 


$('#second').append("<option>'"+y[z]+"'</option>") 

    } 



    }) 
}) 


</script> 


</head> 

<body> 


<div class="menu"> 
<select id="first"> 
<option>select</option> 
<option>2011</option> 
<option>2010</option> 
<option>2009</option> 

</select> 
<select id="second"></select> 

</div> 


</body> 
+0

如何停止附加选项。如果我选择2011年,那么它相应的月份显得很完美。但如果我选择其他年份的第二次​​,那么是月份正在追加。我想删除旧的选项。在一个时间选项应该是可见的。 – Carlos 2012-07-09 06:40:04

回答

3

看到这个DEMO:

http://jsfiddle.net/rathoreahsan/vMuev/

JQUERY:

var categories = { 
    "None":[{value:'3', text:'No cataegory selected'}], 
    "2011":[{value:'1', text:'jan_feb_march'}], 
    "2010":[{value:'2', text:'jan_march_april'}], 
    "2009":[{value:'3', text:'dec_oct_feb'}] 
}; 

function selectchange(){ 
    var select = $('[name=items]'); 
    select.empty(); 
    $.each(categories[$(':selected', this).text()], function(){ 
     select.append('<option value="'+this.value+'">'+this.text+'</option>'); 
    }); 
} 

$(function(){ 
    $('[name=category]').on('change', selectchange); 
}); 

希望这将是有用的:-)

+0

哇!非常感谢你,这正是我想要的。 – Carlos 2012-07-09 05:31:19

+0

如何停止附加选项。如果我选择2011年,那么它相应的月份显得很完美。但如果我选择其他年份的第二次​​,那么是月份正在追加。我想删除旧的选项。在一个时间选项应该是可见的 – Carlos 2012-07-09 06:40:32

2

试试这个:

$("<option> some value </option>").appendTo($("#second")); 
+0

谢谢先生,我几乎在那里,但问题只是它保留了它的旧选项,它显示价值像jan_feb_march我想为每个月单独选项。 – Carlos 2012-07-09 05:26:29

+0

如何停止附加选项。如果我选择2011年,那么它相应的月份显得很完美。但如果我选择其他年份的第二次​​,那么是月份正在追加。我想删除旧的选项。一年一次的选项应该是可见的 – Carlos 2012-07-09 06:40:26