大类和类别的select联动效果

src/main/resources/static/assets/js/project_budget_cost.js

@@ -22,12 +22,14 @@ $(function () {
 
     //绑定其他其他的输入框
     bindOtherOtherChangeable();
+    //绑定采购明细中select联动事件
+    bindTypeSelectChange();
 });
 /**
  * 采购成本增加一行
  */
 function appendTrCost() {
-    var template = '<tr><td><select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost">'+
+    var template = '<tr><td><select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost am-modal-prompt-input-cost-type">'+
         '<option value="1">设备</option>'+
         '<option value="2">施工</option>'+
         '<option value="3">服务</option>'+
@@ -35,7 +37,7 @@ function appendTrCost() {
         '</select>'+
         '</td>'+
         '<td>'+
-        '<select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost">'+
+        '<select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost am-modal-prompt-input-cost-category">'+
         '<option value="1">华智产品</option>'+
         '<option value="2">紫光其他产品</option>'+
         '<option value="3">外购产品</option>'+
@@ -58,7 +60,10 @@ function appendTrCost() {
     $("#costTable").append(template);
     //重新绑定删除事件和input修改事件
     bindDeleteBtn();
-    //bindChangeableInput();
+    //重新绑定
+    bindChangeableInput();
+    //绑定采购明细中select联动事件
+    bindTypeSelectChange();
 }
 /**
  * 更新页面收入的数据【累加】
@@ -141,3 +146,61 @@ function bindOtherOtherChangeable() {
         updateProjectContributionProfitRate();
     });
 }
+
+SELECT_DATA={
+    "1":[
+        {
+            "value":"1",
+            "name":"华智产品"
+        },
+        {
+            "value":"2",
+            "name":"紫光其他产品"
+        },
+        {
+            "value":"3",
+            "name":"外购产品"
+        }
+    ],
+    "2":[
+        {
+            "value":"4",
+            "name":"外购工程"
+        }
+    ],
+    "3":[
+        {
+            "value":"5",
+            "name":"华智服务"
+        },
+        {
+            "value":"6",
+            "name":"紫光其他服务"
+        },
+        {
+            "value":"7",
+            "name":"外购服务"
+        }
+    ],
+    "4":[
+        {
+            "value":"8",
+            "name":"其他"
+        }
+    ]
+};
+
+/**
+ * 大类类别联动效果
+ */
+function bindTypeSelectChange() {
+    $(".am-modal-prompt-input-cost-type").on('change',function () {
+        var categorySelect = $(this).parent().parent().find(".am-modal-prompt-input-cost-category");
+        var type = $(this).val();
+        categorySelect.empty();
+        SELECT_DATA[type].forEach(function (d) {
+            categorySelect.append("<option value='"+d.value+"'>"+d.name+"</option>");
+        })
+    });
+}
+

src/main/resources/templates/admin/project_budget_edit.ftl

@@ -486,7 +486,7 @@
                         <#list costDetails as costDetail>
                         <tr>
                             <td>
-                                <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost">
+                                <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost am-modal-prompt-input-cost-type">
                                     <option value="1" <#if costDetail.type == 1>selected</#if>>设备</option>
                                     <option value="2" <#if costDetail.type == 2>selected</#if>>施工</option>
                                     <option value="3" <#if costDetail.type == 3>selected</#if>>服务</option>
@@ -494,7 +494,7 @@
                                 </select>
                             </td>
                             <td>
-                                <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost">
+                                <select style="width: auto" class="am-modal-prompt-input am-modal-prompt-input-cost am-modal-prompt-input-cost-category">
                                     <option value="1" <#if costDetail.category == 1>selected</#if>>华智产品</option>
                                     <option value="2" <#if costDetail.category == 2>selected</#if>>紫光其他产品</option>
                                     <option value="3" <#if costDetail.category == 3>selected</#if>>外购产品</option>