EasyUi + JS ---- ComboBox cascade and easyuicombobox Cascade

EasyUi + JS ---- ComboBox cascade and easyuicombobox Cascade

Recently I am working on the effect of EasyUi ComboBox-Level Association. The related content is as follows:

EasyUI is just getting started with JavaScript. I have learned it before. But I am still a newbie in how to use it. However, I am still learning it and practice it. This is the final principle. I will directly go to the Code:

Front-end HTML code:

<Span> School: </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 drop-down 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' "/> @ * field drop-down box * @ <span style =" margin-left: 5px; "> test room: </span> <input id = "ClassRoom" class = "easyui-combobox" name = "DropDownList_ExamRoom" style = "width: 180px;" data-options = "valueField: 'Your alexamroomid', textField: 'classroomid' "/>

The following is the JS Code:

$ (Function () {// drop-down cascade box // college var College =$ ('# college '). combobox ({valueField: 'organizationpid ', textField: 'organizationname', method: 'get', url:'/Examinee/QueryAllCollege ', onLoadSuccess: onLoadSuccess, // query all schools onSelect: function (rec) {// query all courses by school $. 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) {// query the exam name by course ID $. get ('/Examinee/queryexambycourseid', {'courseid': rec. courseID, 'organizationname': enCollege}, function (data) {examname. combobox ("clear "). combobox ('loaddata', data); classname. combobox ("clear") ;}, 'json') ;}}); // exam name var examname =$ ('# examname '). combobox ({valueField: 'examid', textField: 'examname', method: 'get', onLoadSuccess: onLoadSuccess, onSelect: function (rec) {// query test room information $. get ('/Examinee/queryclassroomidbyexamid', {'examid': rec. examId}, function (data) {classname. combobox ("clear "). combobox ('loaddata', data) ;}}); // test room var classname =$ ('# classname '). combobox ({valueField: 'javasalexamroomid', textField: 'classroomid', onLoadSuccess: onLoadSuccess}); // select the first function onLoadSuccess () during initialization () {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]) ;}}});

A good memory is not as bad as a pen, and these are valuable experiences.