IE8下面，select级联时的奇怪问题

Image：

HTML：

                            <select id="province" class="tableSelect" name="province">
                                <option value="0">==请选择==</option>
                            </select>
                            <select id="city" class="tableSelect" name="city">
                            	<option value="0">==请选择==</option>
                            </select>
                            <input type="text" class="tableText" id="uAddress" name="uAddress" /></td>

JS：

	var total_str2 = "<select id=\"city\" class=\"tableSelect\" name=\"city\">";
	var start_str2 = "<option value=\"0\">==请选择==</option>";
	var last_str2 = "</select>";
	$("#province").append(GetMainItem(dicArea))
	             .change(function(){
					  var cur_val2 = GetSubItem($("#province").val(),dicArea);
					  if(cur_val2.length>0){
					      $("#city").html(total_str2+start_str2+cur_val2+last_str2);
					      //$("#city").html(start_str2+cur_val2);
					  }else{
						  $("#city").html(start_str2);
					  }
				 });

问题来了：

IE8下面，下拉列表无内容可选

尝试使用

$("#city").html(start_str2+cur_val2);

替换

$("#city").html(total_str2+start_str2+cur_val2+last_str2);

居然可以了。

愿高手指教！