关于select框赋值需要点两次的问题

[疯狂的宝三]

						<label>
							<input id="doctorcode" type="hidden" value="">
							<span>预约专家：</span>
								<select id="doctor">
								    <option value="">————请选择专家————</option>
							    </select>
							<span class="error" style="color:red;"></span>
						</label>

	$('#doctor').focus(function(){
		var code = $('#dept').val();
		if(code){
			$('.error').empty();
			var getDoctorInfo = '{:U("Booking/getDoctorInfo")}';
			$.ajax({
				type:'GET',
				url:getDoctorInfo,
	            data:{code:code},
	            success:function(data){
	                console.log(data);
	                var str = '<option value="">————请选择专家————</option>';
	                for (var i =0; i < data.length; i++) {
	                    str+='<option data="'+data[i].doctorname+'" value="'+data[i].doctorcode+'">'+data[i].doctorname+'</option>';
	                };

	                $('#doctor').empty().append(str);

	            }
			});
		}else{
			msg = '请先选择科室';
			$('.error').empty().append(msg);
			$('#doctor').empty();
		}
	})

[疯狂的宝三]

我用JS给这个select框赋值，但是需要点两次才会正常，第一次点的时候虽然有值但是没有样式，如图：
求解。

[傲雪星枫]

那表示dom渲染慢
可以赋值后执行一次样式加载。或把样式直接写在<option中。 style="" 试试

[码无边]

页面初始化的时候，把dom填充 $(function(){ $.post(url,{},function(data){ optionstring = ""; for (var j = 0; j < data.length; j++) { optionstring += "<option value=>" + + "</option>"; } $("#doctor").html(optionstring ); }) })

[疯狂的宝三]

谢谢各位，后来我把事件改成了change事件，预加载了。

[一只老菜鸟]

select用change，focus未必发生了change