利用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>