利用ajax 异步 同一页面动态拼接标签

今天学习jquery ，想做一个界面上的功能，

需求描述：选择完时间栏之后，根据选择的时间动态的查询下拉框的内容。

大体的思想：

利用jquery的异步操作，实现局部刷新连接数据库，将返回的值动态拼接到select上面。

时间控件选择jquery的datepicker组件，

$( "#orderTime" ).datepicker({
						"dateFormat": "yy-mm-dd",
						onSelect: function(selectedDate) {//选择日期后执行的操作  
                			$.ajax( {   
		            				"type": "POST",
		             				"url": 'admin/DataPickerAdminAction',
		             				"contentType": "application/x-www-form-urlencoded; charset=utf-8", 
		             				"data": {
   										orderTime:selectedDate
		             				},
					        		success: function(data, textStatus) { 
					        			//将数据转换成对象
					        			var aaDataObj = eval('('+data+')');
					        			var html = ''; 
                         				$.each(aaDataObj.aaData, function(commentIndex, comment){
                               				html += '<option value="' + comment['roomId']
                                        	 + '">' + comment['roomNum']
                                        	 + '</option>';
                        				});
					            		$( "#roomNum" ).append(html);
					        		}   
					    	});   
            			}  
					});

前台界面的代码：

<div>
			<label for="text">时间</label> 
			<input type="text" name="orderTime" id="orderTime"/> 
		</div>
		<div>
			<label for="text">房间</label> 
			<select id="roomNum" name="roomNum">
				<option value="">选择入住房间...</option>
			</select>
		</div>