ajax中select擷取預設值

ps: 最近項目改bug,遇到前端的問題，花了不少時間才找出毛病，在這裡做個記錄。避免同樣的問題。随便分享一下，防止踩坑。。。

場景：頁面展示一列列資料；選中某列，點選編輯，跳轉到編輯頁面；将該列的某個屬性值展示在編輯頁面的select框中。（select預設值）

一、 運用到的知識點

1. ajax

   項目中經常運用到ajax來請求資料，接受背景資料，用于在前台展示。

   ajax 是異步請求，局部加載資料；與url 請求不同，不會重新整理頁面。但是對請求我們可以 通過屬性async來控制同步和異步。

   同步與異步的主要差別：

   同步可以改變外部定義的變量值，

   異步可以提高加載效率

2. 異步和同步

   異步：ajax不會影響整個頁面的加載，相當于和浏覽器加載或者使用者操作分開走，互不相幹，展現在使用者角度就是不會有什麼卡頓的感覺仿佛無事發生。

   同步：那就與異步相反，他和加載處于同一條線上，等這位大爺過了馬路，後面的人才能接着走，就是在加載它的時候，全部的過程都等停下來，也就是假死狀态。

3. select下拉框設定預設值

$("#fwtxxmbUpdateTemp select[name='type']").attr("value",type);
           

二、項目執行個體

1. ajax請求資料，在編輯頁面一打開，會有動态的下拉框

var typename="";
var typecode="";
function qeuryTempletnameList(){
	$.ajax({
		url: XXXX,  //請求位址
		type: "POST",
		async:false,    // 設定成同步，typename，typecode外部變量才能接受值
		dataType: "json",
		success : function(data){  
			 var datas = data.data;
			 var optionstring ="";
             for (var i =0 ; i < datas.length ; i++) {                 
                 optionstring += "<option value=\"" + datas[i].TYPECODE + "\" >" + datas[i].TYPENAME + "</option>";  
                 typename = datas[i].TYPENAME;
                 typecode = datas[i].TYPECODE;
             }
             $("#type").html("<option value=\"\">--請選擇--</option>" + optionstring);            
		}
	});
}
           

2. 點選展示是預設值

$.open({
					title:title,
					width:"700px",
					height:"80%",
				    content:$("#xxx").html(),
				    btns:btns,
				    success : function(){	
				        qeuryTempletnameList();		    					    	
				    	var type = data.data.type;     //data.data是另個請求的傳回的資料，在這裡我沒有寫
				    	//通過設定value屬性值，擷取select值
                        $("#Temp select[name='type']").attr("value",type);	   	
				    }
	})
           

效果： //從清單頁面 帶到 編輯頁面 的 預設選中資料