Recently in doing a Easyui ComboBox level linkage effect, the relevant content is as follows:
Easyui just contact, JS learned before, but in how to use this aspect of oneself is a novice, but now still in continuous learning, practice, this is the hard truth, directly on the code:
HTML code for the foreground:
<span> Academy: </span><input id= "College" class= "Easyui-combobox" name= "Dropdownlist_course" style= " width:180px; " /> @* Course drop-down box *@ <span style= "margin-left:5px;" > Course: </span><input id= "Course" class= "Easyui-combobox" name= "Dropdownlist_course" style= "width: 180px; " data-options= "Valuefield: ' CourseID ', TextField: ' Coursename '"/> @* exam dropdown box *@ <span style= "Margin-left : 5px; " > Exam Name: </span><input id= "Examname" class= "Easyui-combobox" name= "Dropdownlist_examname" style= " width:180px; "data-options=" Valuefield: ' Examid ', TextField: ' Examname ' "/> @* session dropdown Box *@ <span style=" margin-left:5px; " > Examination: </span><input id= "Classroom" class= "Easyui-combobox" name= " dropdownlist_examroom" style= " width:180px; "data-options=" Valuefield: ' Virtualexamroomid ', TextField: ' Classroomid ' "/>
Here is the JS code:
$ (function () {//drop-down cascade//college var college = $ (' #College '). ComboBox ({valuefield: ' Organizationpid ', TextField: ' OrganizationName ', method: ' Get ', url: '/examinee/queryallcollege ', Onloadsuccess:onloadsuccess,//Check all College Onselect:function (REC) {//According to the Academy for all courses $.get (' /examinee/querycouserinfobyorganizationid ', {"Organizationpid": Rec. Organizationpid}, function (data) {Course.combobox ("clear"). ComboBox (' LoadData ', data); Examname.combobox ("clear"); Classname.combobox ("clear"); }, ' json '); } }); Course var Encollege = $ (' #College '). ComboBox (' GetText '); var course = $ (' #Course '). ComboBox ({valuefield: ' CourseID ', TextField: ' Coursename ', method: ' Get ', Onloadsuccess:onloadsuccess, Onselect:function (REC) {//Check the exam name according to the course ID $.get ('/examine E/queryexambycourseid ', { ' CourseID ': rec. CourseID, ' OrganizationName ': Encollege}, function (data) {Examname.combobox ("clear"). ComboBox (' LoadData ') , data); Classname.combobox ("clear"); }, ' json '); } }); Test name var examname = $ (' #ExamName '). ComboBox ({valuefield: ' Examid ', TextField: ' Examname ', metho D: ' Get ', onloadsuccess:onloadsuccess, Onselect:function (REC) {//Query the exam room information $.get ('/examinee/que Ryclassroomidbyexamid ', {' Examid ': rec. Examid}, function (data) {Classname.combobox ("clear"). ComboBox (' LoadData ', data); }); } }); Examination room var classname = $ (' #ClassName '). ComboBox ({valuefield: ' Virtualexamroomid ', TextField: ' Classroomid ') , onloadsuccess:onloadsuccess}); Initialize selects the first function onloadsuccess () {var target = $ (this); var data = Target.combobox ("GetData"); var options = Target.combobox ("Options"); if (datA && data.length > 0) {var fs = data[0]; Target.combobox ("SetValue", Fs[options.valuefield]); } }});
Good memory is better than bad writing, these are valuable experiences.
Beginners Learn EASYUI+JS----COMBOBOX Cascade