使用前端框架后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');

总结（可以忽略，之前不知道看文档时
4000
写的总结）

为什么会出现这样的情况?

大神给的解释是：前端框架的样式把你的动态样式给覆盖了，需要取消掉。

（前端的水很深，有关问题会持续跟踪，继续深入研究）