jQuery uses EasyUi to realize three-level linkage drop-down box effect example sharing-JS Tutorial-php.cn

This article mainly introduces jQuery's use of EasyUi to achieve three-level linkage effects. Examples of using EasyUi to achieve three-level linkage techniques are very practical. Friends in need can refer to it. I hope it can help everyone.

Not to mention anything else, using easyui to achieve three-level linkage is mainly to layer one layer inside another. Let’s take a look at the code

html form

Copy after login

easyUi's Combobox:

// 一层Combo var srmCombx = $("#txtShouName")combobox({ loader:function(param,success,error){ $ajax({ url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+selectSgId+'', dataType: 'json', success: function(data){ dataunshift({equipmentid:'',equipmentname:'全部'}); success(data); }, error: function(){ errorapply(this, arguments); } }); }, onSelect:function(record){ //onSelect 用户点击时触发的事件 在此的意义在于，用户点击一级后自动二级combobox piperowCombxcombobox({ loader:function(param,success,error){ $ajax({ url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName")combobox("getValue")+'', dataType: 'json', success: function(data){ dataunshift({equipmentid:'',equipmentname:'全部'}); success(data); }, error: function(){ errorapply(this, arguments); } }); }, onSelect:function(record){ //这里也使用了onSelect事件，在二级combobox被用户点击时触发三级combobox pipeCombxcombobox({ loader:function(param,success,error){ $ajax({ url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName")combobox("getValue")+'', dataType: 'json', success: function(data){ dataunshift({equipmentid:'',equipmentname:'全部'}); success(data); }, error: function(){ errorapply(this, arguments); } }); }, valueField: 'equipmentid', textField: 'equipmentname', value:'', editable:false }); }, onLoadSuccess:function(){ //清空三级下拉框 就是成功加载完触发的事件 当一级combobox改变时，二级和三级就需要清空 pipeCombxcombobox("clear"); pipeCombxcombobox('setValue', '全部'); //给combobox下拉框设置一个值，否则为空不好看 }, valueField: 'equipmentid', textField: 'equipmentname', value:'', editable:false })combobox("clear"); //清空二级下拉框 }, valueField: 'equipmentid', textField: 'equipmentname', value:'', editable:false }); /*******************************/ //下面的俩个是组件， // 二层Combo var piperowCombx = $("#txtPipeRowName")combobox({ loader:function(param,success,error){ $ajax({ url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtShouName")combobox("getValue")+'', dataType: 'json', success: function(data){ dataunshift({equipmentid:'',equipmentname:'全部'}); success(data); }, error: function(){ errorapply(this, arguments); } }); }, valueField: 'equipmentid', textField: 'equipmentname', value:'', editable:false }); //三层Combo var pipeCombx=$("#txtPipeName")combobox({ loader:function(param,success,error){ $ajax({ url: '${CTX_ROOT}/TEquipmentsController?method=getEquipmentByParId&id='+$("#txtPipeRowName")combobox("getValue")+'', dataType: 'json', success: function(data){ dataunshift({equipmentid:'',equipmentname:'全部'}); success(data); }, error: function(){ errorapply(this, arguments); } }); }, valueField: 'equipmentid', textField: 'equipmentname', value:'', editable:false });

Copy after login

Related recommendations:

Ajax products Simple implementation method of classified three-level linkage

jquery and ajax realize three-level linkage of provinces and cities in two ways, encapsulation and non-encapsulation

Provinces and cities Example of implementation of district three-level linkage function (php+MySql+Ajax+jQuery)

The above is the detailed content of jQuery uses EasyUi to realize three-level linkage drop-down box effect example sharing. For more information, please follow other related articles on the PHP Chinese website!