easyUI對combobox設置value和text

參考自：點擊打開鏈接

 

 

 

1.出現的問題

 

當再編輯教師，進行教師信息回顯的時候。

 

對於上面這個情況，我期望的時候，傳入後臺的數據，是專業所在的編號id，而不是“軟件工程”這個名字。

但是如果不對教師進行更改院系和專業，那麼傳入後臺的就是名字，而不是id。

 

2.問題分析

下面貼上代碼：

easyUI的代碼：

 

							
$('#mname').combobox({   
								
     required:true, 
								
     editable:false,
								
     valueField:'mno',    
								
     textField:'mname',

     value:t.mname//t是後臺已經查詢出當前要回顯的教師對象。 
});

 

前臺所在的代碼

 

<form  id='teacherForm' method="post">
	
			
		<div  style="width:100%;margin-top:3px;">
			<font size="2">請選擇所在院系：</font> 
			<!-- 專業所在院系：下拉框，用戶選擇 -->
			<select id="cname" name="cno" style="width:100%;max-width:150px;"></select>
		</div>
		<div  style="width:100%;margin-top:3px;">
			<font size="2">請選擇所在專業：</font> 
			<!-- 專業所在院系：下拉框，用戶選擇 -->
			<select id="mname" name="mno" style="width:100%;max-width:150px;"></select>
		</div>
	</form>

我爲什麼把專業所在select的id設成mname，name設成mno，因爲，我在easyUI裏面設置了valueField代表mno，textField代表mname。

 

因爲展示給用戶的要是文字mname，而不能是編號mno。

所以，這個select，當用戶前臺選擇 textField（mname）， 而後臺提交的是valueField( mno) 個人猜測

 

3.問題出現的原因

所以，問題出現的原因是因爲：easyUI的代碼中設置了：

   value:t.mname//t是後臺已經查詢出當前要回顯的教師對象。 

 

導致，用戶如果不重新進行院系的選擇，提交到後臺的數據就是 t.mname； 是一串漢字。

 

 

4.解決的辦法

只需要將 valueFiled和textField到設置一下就可以了

對valueFiled設置成mno，

對textField設置成mname；

所以，easyUI修改之後的代碼如下：

 

$('#mname').combobox({   
								
     required:true, 
								
     editable:false,
								
     valueField:'mno',    
								
     textField:'mname',
							
});  
							
$('#mname').combobox('setValue',t.mno);//一定要先value後text,否則text與value值會相同全爲value值  
							
$('#mname').combobox('setText', t.mname); 

注意三個的順序！

 

這樣改好之後，所有的功能就都ok了。