easyui-combobox三级联动

Bertha 。 2023-07-12 03:37 89阅读 0赞
  1. <tr height="40">
  2. <td class="value" width="10%"><label class="Validform_label">所在单位/公司<br>(必填):</label></td>
  3. <td class="txt_value" width="20%">
  4. <input class="easyui-combotree" style="width:190px;height:28px;"
  5. data-options="editable:true,prompt:'请选择',url:'<%=path%>/client/treeList',method:'get',required:true,panelHeight:'300',onBeforeSelect:function(node){checkLeaf(node);},onSelect:function(node){initClient(node);}"/>
  6. <input type="hidden" id="c_org" name="workTask.client_org"/>
  7. </td>
  8. <td class="value" width="10%"><label class="Validform_label">申请人姓名:</label></td>
  9. <td class="txt_value" width="20%"><input type="text" id="c_name" name="workTask.client_name" style="width:190px;height:28px;"
  10. class="easyui-textbox" /><span></span></td>
  11. <td class="value" width="10%"><label class="Validform_label">联系电话:</label></td>
  12. <td class="txt_value" width="20%"><input type="text" id="c_tel" name="workTask.client_tel" style="width:190px;height:28px;"
  13. class="easyui-textbox"/><span></span></td>
  14. </tr>
  15. <tr height="40">
  16. <td class="value" width="10%"><label class="Validform_label">选择对应合同:</label></td>
  17. <td class="txt_value" width="20%">
  18. <select class="easyui-combobox" style="width:190px;height:28px;"
  19. id="contract" name="workTask.contract_id" data-options="valueField:'ID',textField:'NAME', onSelect: function(node){initService(node);}">
  20. </select>
  21. <span></span></td>
  22. <td class="value" width="10%"><label class="Validform_label">服务范围:</label></td>
  23. <td class="txt_value" width="20%" colspan="3">
  24. <select class="easyui-combobox" style="width:190px;height:28px;" id="service" name="workTask.service_id" data-options="valueField:'ID',textField:'NAME'">
  25. </select>
  26. <span></span></td>
  27. </tr>
  28. //点击后获取联系人信息
  29. function initClient(node){
  30. if(node.id){
  31. $('#c_name').textbox('setValue', node.attributes.contacts);
  32. $('#c_tel').textbox('setValue', node.attributes.tel);
  33. $('#c_qq').textbox('setValue', node.attributes.qq);
  34. $('#c_org').val(node.text);
  35. // 选择具体单位后,获取该单位下的所有合同
  36. var org_name = node.text;
  37. var url = "<%=path%>/contract/getContractListByOrgName?name="+org_name;
  38. $("#contract").combobox('reload',url);
  39. <%-- $.ajax({
  40. url:"<%=path%>/contract/getContractListByOrgName?name="+org_name,
  41. type:'post',
  42. dataType:'json',
  43. success:function(data){
  44. if(data.result=='0'){
  45. console.log(data.data);
  46. $("#contract").append(data.data);
  47. }else{
  48. alert("你选择的单位还没有合同,请添加该单位的合同后再派发工单");
  49. }
  50. },
  51. error:function(res){
  52. }
  53. }); --%>
  54. }
  55. }
  56. // 点击合同,加载服务范围
  57. function initService(node){
  58. var service_id = node.ID;
  59. console.log("service_id="+service_id);
  60. var url = "<%=path%>/contract/getServiceListByContractId?id="+service_id;
  61. $("#service").combobox('reload',url);
  62. }

页面效果,涉及到三个下拉框联动
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,89人围观)

还没有评论,来说两句吧...

相关阅读

    相关 三级联动

    .set设置:ctrl+alt+s; 2.文本框在设置border-box之前边框向内设置 3.行内标签不能设置上下的margin(span) 4.json为...

    相关 Javascript实现三级联动

    三级联动:就是平时网页上需要选择的省市县对应位置的下拉栏模块,当选择好省位置后市的下拉栏更新为已选省的,县类似。 ![这里写图片描述][SouthEast] <!

    相关 WebForm 三级联动

    三级联动 数据库根据父级代号条件写查询 返回list<>集合 方法一: 创建三个下拉列表: ※AutoPostBack:否发生自动回传到服务器的操作。如果把该属性设置为