首页 > 代码库 > 新手学EasyUi+JS----ComboBox 级联
新手学EasyUi+JS----ComboBox 级联
最近在做一个EasyUi ComboBox的级别联动的效果,相关的内容如下:
EasyUI刚接触,JS之前学过,不过在怎么用这方面自己还是个新手,不过现在还在不断的学习,实践出真知,这是硬道理,直接上代码:
前台的HTML代码:
<span>学院:</span><input id="College" class="easyui-combobox" name="DropDownList_Course" style="width: 180px;"/> @* 课程下拉框 *@ <span style="margin-left:5px;">课程:</span><input id="Course" class="easyui-combobox" name="DropDownList_Course" style="width: 180px;"data-options="valueField:'CourseId',textField:'CourseName'"/> @* 考试下拉框 *@ <span style="margin-left:5px;">考试名称:</span><input id="ExamName" class="easyui-combobox" name="DropDownList_ExamName" style="width: 180px;" data-options="valueField:'ExamId',textField:'ExamName'" /> @* 场次下拉框 *@ <span style="margin-left:5px;">考场:</span><input id="ClassRoom" class="easyui-combobox" name="DropDownList_ExamRoom" style="width: 180px;" data-options="valueField:'VirtualExamRoomId',textField:'ClassRoomId'" />
下面是JS的代码:
$(function () { //下拉级联框 //学院 var college = $('#College').combobox({ valueField: 'OrganizationPID', textField: 'OrganizationName', method:'get', url: '/Examinee/QueryAllCollege', onl oadSuccess:onLoadSuccess, //查询所有学院 onSelect: function (rec) { //根据学院查询所有课程 $.get('/Examinee/QueryCouserInfobyOrganizationId', { "OrganizationPID": rec.OrganizationPID }, function (data) { course.combobox("clear").combobox('loadData', data); examname.combobox("clear"); classname.combobox("clear"); }, 'json'); } }); //课程 var enCollege = $('#College').combobox('getText'); var course = $('#Course').combobox({ valueField: 'CourseID', textField: 'CourseName', method: 'get', onl oadSuccess:onLoadSuccess, onSelect: function (rec) { //根据课程ID查询考试名称 $.get('/Examinee/QueryExamByCourseId', { 'CourseID': rec.CourseID, 'OrganizationName': enCollege }, function (data) { examname.combobox("clear").combobox('loadData', data); classname.combobox("clear"); }, 'json'); } }); //考试名称 var examname = $('#ExamName').combobox({ valueField: 'ExamId', textField: 'ExamName', method: 'get', onl oadSuccess:onLoadSuccess, onSelect: function (rec) { //查询考场信息 $.get('/Examinee/QueryClassRoomIdByExamId', { 'ExamId': rec.ExamId }, function (data) { classname.combobox("clear").combobox('loadData', data); }); } }); //考场 var classname = $('#ClassName').combobox({ valueField: 'VirtualExamRoomId', textField: 'ClassRoomId', onl oadSuccess:onLoadSuccess }); //初始化就选中第一个 function onl oadSuccess() { var target = $(this); var data = http://www.mamicode.com/target.combobox("getData");>好记性不如烂笔头,这些都是宝贵的经验。
新手学EasyUi+JS----ComboBox 级联
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。