当前位置: 代码迷 >> Web前端 >> 替Select控件动态添加选项
  详细解决方案

替Select控件动态添加选项

热度:87   发布时间:2012-10-26 10:30:59.0
为Select控件动态添加选项
关键在于使用AJAX获取服务器端传来的JSON格式选项列表,然后用jQuery的getJSON()函数解读数据。本例的服务器端用的是Spring MVC ,控制器返回的模型由spring-json view转化为JSON格式,供jQuery使用。
$(document).ready(function(){
    //jQuery test   
	$("a").click(function(event){
         alert("如您所见, the link no longer took you to jquery.com");
         event.preventDefault();
       });
	//button test
	   $('#getName').click(function(){	
		$.getJSON('hello.htm', function(data) {
//测试嵌套数据{{username:张三},{users:{{username:张三,password:123456},...}}
		$('#username').html( data.username );
//		$('#password').html(data.users[1].password);
//		$('#userId').html(data.users[0].userId);
//		$('#roleId').html(data.users[0].roleId);		
		$('#selectfrom').empty();
		var users = data.users;
		$.each(users,function(index,value){
//			$('#selectfrom').add(value.userId,value.username,false,false);
//			$('#selectfrom').add("<option value=value.userId>"+value.username+"</option>");
			$("#selectfrom")[0].options.add(new Option(value.username,value.userId,false,false));
		});
		
		});
     });
    });

Spring MVC与AJAX的整合参见:
http://hi.baidu.com/luohuazju/blog/item/ced42801de465309728da55c.html
  相关解决方案