怎么在jQuery中使用EasyUi实现一个三级联动下拉框效果

这篇文章给大家介绍怎么在jQuery中使用EasyUi实现一个三级联动下拉框效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

html表单

<input id="txtPipeRowName" >     <input id="txtPipeName" >

easyUi的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  });

关于怎么在jQuery中使用EasyUi实现一个三级联动下拉框效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。