下拉框联动

最新推荐文章于 2022-10-25 20:50:54 发布

原创最新推荐文章于 2022-10-25 20:50:54 发布 · 136 阅读

CC 4.0 BY-SA版权

这段代码展示了如何使用JavaScript实现HTML页面中节点状态与流程状态两个下拉菜单的联动。当节点状态改变时，根据不同的状态填充流程状态的选项。涉及到的节点状态包括未受理、受理和结案，每个状态对应不同的流程阶段。

<td class="col-sm-3 control-label th01">节点状态</td>
<td>
<select name="inNoteStatus" id="inNoteStatus" class="form-control" 
onChange="set_city(this, this.form.noteStatus);">
<option value="">请选择</option>
<option value="A1">未受理</option>
<option value="A2">受理</option>
<option value="A3">结案</option>
</select>
</td>
<td class="col-sm-3 control-label th01">流程状态</td>
<td>
<select name="noteStatus" id="noteStatus" class="form-control">
<option value="">请选择</option>
</select>
</td>
<script type="text/javascript">
$(document).ready(function () {
//绑定分类下拉框选项变化事件
$("#inNoteStatus").on('change',
   function () {
       var projectType = $(this).val();
       $('#noteStatus').val('').trigger('change');
       if (projectType == '') {
       	$("#noteStatus").empty().append('<option value="">请选择</option>');
           return;
       }
       var projectsMap = {};
       if(projectType=='A1'){
           var projectsMap = {'1':{'a':'专利申请','b':'01'},'2':{'a':'部门主管审核通过','b':'02'},
           '3':{'a':'部门主任审核通过','b':'03'},'4':{'a':'管理部门专员审核通过','b':'04'},
           '5':{'a':'管理部门领导审核通过','b':'05'},'6':{'a':'总经理审核通过','b':'06'},
           '7':{'a':'分配代理事务所','b':'07'},'8':{'a':'代理事务所撰写专利申请文件','b':'08'},
           '9':{'a':'管理部门专员审核','b':'09'},
           };
       }else if (projectType=='A2'){
           var projectsMap = {
           	'1':{'a':'代理事务所填写受理信息','b':'10'},'2':{'a':'代理事务所答复审查意见通知书','b':'11'},
           };
       }else if (projectType=='A3'){
           var projectsMap = {
           	'1':{'a':'授权','b':'12'},'2':{'a':'驳回','b':'13'},'3':{'a':'视撤','b':'14'},
           	'4':{'a':'自动终止','b':'15'},
           	'5':{'a':'否定','b':'998'},'6':{'a':'终止','b':'999'},
           };
       }
       var option = "";
       for (var i in projectsMap) {
               option += '<option value="' + projectsMap[i].b + '"  >' + projectsMap[i].a + '</option>';
       }
       $("#noteStatus").empty().append('<option value="">请选择</option>' + option);
   });

});
</script>