使用前端框架后js动态改变样式的一些问题（select）

• 问题描述：
  最近在做一个项目，用到一个前端框架，其中一个需求是:在选中“部门”这个下拉菜单（select）之后，要求另外三个“车间”“班组”“工种”下拉菜单（select）变为不可编辑，即这三个下拉菜单的“disabled”属性值置为”disabled”。我是用jQuery来动态实现的，代码如下：

         /*选择部门后其他三个下拉菜单变为不可编辑，部门选回所有类别后其他三个下拉菜单变为可编辑  */         $("#departmentPid").change(function(){           var departmentPidValue=$("#departmentPid").val();           /* 如果部门选择的不是默认值，即选中具体的部门*/           if(departmentPidValue!="option0"){            /*将其他三个下拉菜单置为不可编辑状态*/            $("#WorkshopPid").attr("disabled","disabled");            $("#TeamPid").attr("disabled","disabled");             $("#WorktypePid").attr("disabled","disabled");              }else{            /*如果部门选择默认值，将其他三个下拉菜单置为可编辑状态*/             $("#WorkshopPid").removeAttr("disabled","disabled");             $("#TeamPid").removeAttr("disabled","disabled");             $("#WorktypePid").removeAttr("disabled","disabled");           }           });

• 问题进阶分析
  可是运行之后，这个动态效果没有成功。我开始以为是代码写错了，可是经过多方考证，我的代码完全正确。后来进过一个前端的大神分析之后，得出一个结论：是前端框架在捣鬼。
  后来他给我加了一几行代码，就可以实现了，代码如下：

         /*选择部门后其他三个下拉菜单变为不可编辑，部门选回所有类别后其他三个下拉菜单变为可编辑  */         $("#departmentPid").change(function(){           var departmentPidValue=$("#departmentPid").val();           if(departmentPidValue!="option0"){            $("#WorkshopPid").attr("disabled","disabled");             /*下面这两行是加的代码*/            $('#WorkshopPid').trigger('changed.selected.amui');            $('#WorkshopPid').next('div').children('button').addClass('am-disabled');            $("#TeamPid").attr("disabled","disabled");             /*下面这两行是加的代码*/            $('#TeamPid').trigger('changed.selected.amui');            $('#TeamPid').next('div').children('button').addClass('am-disabled');            $("#WorktypePid").attr("disabled","disabled");             /*下面这两行是加的代码*/            $('#WorktypePid').trigger('changed.selected.amui');            $('#WorktypePid').next('div').children('button').addClass('am-disabled');             }else{             $("#WorkshopPid").removeAttr("disabled","disabled");             /*下面这一行是加的代码*/             $('#WorkshopPid').next('div').children('button').removeClass('am-disabled');             $("#TeamPid").removeAttr("disabled","disabled");             /*下面这一行是加的代码*/             $('#TeamPid').next('div').children('button').removeClass('am-disabled');             $("#WorktypePid").removeAttr("disabled","disabled");             /*下面这一行是加的代码*/             $('#WorktypePid').next('div').children('button').removeClass('am-disabled');           }           });

• 解决方法
  可以看这个前端框架的开发文档，其中有各个组件的js操作方法。
  通过查看文档将上面的问题的解决方案就简化成一行代码：

 /* 以下三行是没有读文档前自己的做法，很不规范*/ $("#WorkshopPid").attr("disabled","disabled");  $('#WorkshopPid').trigger('changed.selected.amui'); $('#WorkshopPid').next('div').children('button').addClass('am-disabled'); /*这个是看完文档得到的解决方案*/       $("#WorkshopPid").selected('disable'); 

• 总结（可以忽略，之前不知道看文档时写的总结）
  为什么会出现这样的情况?
  大神给的解释是：前端框架的样式把你的动态样式给覆盖了，需要取消掉。
  （前端的水很深，有关问题会持续跟踪，继续深入研究）