easyUI对combobox设置value和text

来源:互联网 发布:淘宝店铺吸引流量 编辑:程序博客网 时间:2024/05/28 15:31

参考自:点击打开链接




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了。