jQuery uses EasyUi to achieve the effect of three level linkage drop down box
- 2021-08-03 08:09:29
- OfStack
Don't say anything else, using easyui to realize three-level linkage is mainly one layer to set one layer, and everyone looks at the code
html Form
<input id="txtPipeRowName" style="width:150px;">
<input id="txtPipeName" style="width:150px;">
Combobox for easyUi:
// 1 Layer 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:' All '});
success(data);
},
error: function(){
errorapply(this, arguments);
}
});
},
onSelect:function(record){ //onSelect Events triggered when the user clicks The significance here is that the user clicks 1 Automatic after stage 2 Grade 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:' All '});
success(data);
},
error: function(){
errorapply(this, arguments);
}
});
},
onSelect:function(record){ // It is also used here onSelect Event, in 2 Grade combobox Triggered when clicked by the user 3 Grade 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:' All '});
success(data);
},
error: function(){
errorapply(this, arguments);
}
});
},
valueField: 'equipmentid',
textField: 'equipmentname',
value:'',
editable:false
});
},
onLoadSuccess:function(){ // Empty 3 Stage drop-down box Is to successfully load the triggered event When 1 Grade combobox When it changes, 2 Grade sum 3 Level needs to be emptied
pipeCombxcombobox("clear");
pipeCombxcombobox('setValue', ' All '); // To combobox Drop-down box setting 1 A value, otherwise it will not look good if it is empty
},
valueField: 'equipmentid',
textField: 'equipmentname',
value:'',
editable:false
})combobox("clear"); // Empty 2 Stage drop-down box
},
valueField: 'equipmentid',
textField: 'equipmentname',
value:'',
editable:false
});
/*******************************/
// The following two are components,
// 2 Layer 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:' All '});
success(data);
},
error: function(){
errorapply(this, arguments);
}
});
},
valueField: 'equipmentid',
textField: 'equipmentname',
value:'',
editable:false
});
//3 Layer 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:' All '});
success(data);
},
error: function(){
errorapply(this, arguments);
}
});
},
valueField: 'equipmentid',
textField: 'equipmentname',
value:'',
editable:false
});