easyUI對combobox設定value和text
阿新 • • 發佈:2019-02-04
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了。