Bootstrap的Select异步刷新时有问题

使用bootstrap的select控件后，用$().append()option，发现<ul>里面的内容没有跟着改变，<select id="OS" class="span2 chosen chzn-done">和<div id="OS_chzn" class="chzn-container undefined chzn-container-single">里面的<ul>是对应的。用JSON返回的数据异步刷新select时，ul里面的值没有改变，尝试过下面两张方法都不行：

1. 这种可以添加Select里面的Option，但是不能改变div里面ul里面的值。页面展示没有刷新。 

var ajaxUrl = '/config/loadTypeValues?page_no=1&page_size=100&searchContent=' + typeName;
$.ajax({
type:'get',
url:ajaxUrl,
dataType:'json',
cache:false,
success:function(data){
alert(data);
for (var i=0; i < data.length; i++) {
$('#' + typeName).append("<option value=" + data[i][3] + ">" + data[i][1]+ "</option>");
}
},
error:function(){
jAlert('There are some errors happened');
}
});

2.  下面这种是不能改变Select里面的值，可以刷新改变显示的option元素，也就是页面展示有变化，就是ul里面的值变了，但是选不中你点击的那个option。

$('#' + typeName + '_chzn ul').empty();
//                                     $('#' + typeName).append("<option value=''>-</option>");
//                                     $('#' + typeName + '_chzn ul').append("<li class='active-result' id=" + typeNameStr + "_chzn_o_0>-</li>");
for (var i=0; i < data.length; i++) {
//                                         $('#' + typeName).append("<option value=" + data[i][3] + ">" + data[i][1]+ "</option>");
//
//                                         $('#' + typeName + '_chzn ul').append("<li class='active-result' id=" + typeNameStr + "_chzn_o_" + i + 1 + ">" + data[i][1] + "</li>");
}
},

Html：

<c:when test="${type.controlStyle == 2}">
<div class="control-group">
<label class="control-label">${type.typeName}</label>
<div class="controls" id="controls-${type.typeNameStr}">
<select id="${type.typeNameStr}" name="" class="span2 chosen"  onchange="" tabindex="0">
<c:set var="typeValues" value="${type.typeValues}"/>
<option>-</option>
<c:forEach var="typeValue" items="${typeValues}" >
<option value="${typeValue[3]}">${typeValue[1]}</option>
</c:forEach>
</select>
</div>
</div>
</c:when>

解决方法如下：

1. 看到同事的做法（点击打开链接）

2. 我的做法：

Jquery：

success:function(data){
$('#' + typeNameStr).remove();
$('#' + typeNameStr + '_chzn').remove();
var optionElement = "<option>-</option>";
for (var i=0; i < data.length; i++) {
optionElement += "<option value=" + data[i][3] + ">" + data[i][1]+ "</option>";
}

var selectElement = "<select id='" + typeNameStr + "' name='' class='span2 chosen' tabindex='0'> " + optionElement + " </select>"
alert(selectElement)
$('#controls-' + typeNameStr).append(selectElement);
},
error:function(){
jAlert('There are some errors happened');
}
});